Une explication de la syntaxe du modèle angulaire

Cet article présente principalement l'explication de la syntaxe des modèles angulaires, qui a une certaine valeur de référence. Maintenant, je la partage avec tout le monde. Les amis dans le besoin peuvent s'y référer

Introduction à la syntaxe des modèles

. 1. Expression d'interpolation

<p>Hello {{name}}</p>

Angular évalue toutes les expressions entre doubles accolades, convertit les résultats de l'évaluation en chaînes et les combine avec les littéraux de chaîne adjacents qui sont concaténés. Enfin, attribuez le résultat de l'interpolation combinée à l'attribut de l'élément ou de la directive.

En surface, vous insérez le résultat entre les balises des éléments et attribuez des valeurs aux attributs des balises. Il est pratique d’y penser de cette façon, et ce malentendu vous cause rarement des ennuis. Mais à proprement parler, ce n’est pas vrai. Les expressions d'interpolation sont une syntaxe spéciale qu'Angular convertit en liaisons de propriétés.

est équivalent à

<p [textContent]="interpolate([&#39;Hello&#39;], [name])"></p>

2. Expression de modèle

L'expression de modèle produit une valeur. Angular exécute cette expression et l'attribue à la propriété de la cible de liaison, qui peut être un élément, un composant ou une directive HTML.

La valeur de l'attribut d'entrée est une constante

<show-title title="Some Title"></show-title>

est équivalente à

<show-title [title]="&#39;Some Title&#39;"></show-title>

La valeur de l'attribut d'entrée est une variable

<show-title [title]="someTitle"></show-title>

N'oubliez pas Les crochets indiquent à Angular d'évaluer l'expression du modèle. Si vous oubliez d'ajouter les crochets, Angular traitera l'expression comme une constante de chaîne et utilisera la chaîne pour initialiser la propriété cible. Il n'évaluera pas la chaîne.

Variable de modèle

Le mot-clé let avant hero crée une variable d'entrée de modèle nommée hero. La directive ngFor parcourt le tableau Heroes renvoyé par la propriété Heroes du composant parent, attribuant l'élément actuel du tableau à la variable Hero à chaque itération.

<p *ngFor="let hero of heroes">{{hero.name}}</p>

Variable de référence de modèle

La variable de référence de modèle est généralement utilisée pour référencer un élément DOM dans le modèle. Elle peut également référencer des composants ou des directives angulaires ou des composants Web. Utilisez le signe dièse (#) pour déclarer les variables de référence. #phone signifie déclarer une variable nommée phone pour référencer l'élément . Cette variable de référence de modèle peut être référencée n'importe où dans le modèle.

<input #phone placeholder="phone number">

Instructions de modèle

Les instructions de modèle sont utilisées pour répondre aux événements déclenchés par des cibles de liaison (telles que des éléments HTML, des composants ou des directives).

<date-picker (dateChanged)="statement()"></date-picker>

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Comment utiliser le composant Angular-UI Bootstrap pour implémenter des alertes

Pour config/index.js dans vue : Explication détaillée de la configuration

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!