Maison > interface Web > js tutoriel > le corps du texte

Une explication de la syntaxe du modèle angulaire

不言
Libérer: 2018-07-13 15:00:05
original
1395 Les gens l'ont consulté

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>
Copier après la connexion
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>
Copier après la connexion

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>
Copier après la connexion

est équivalente à

<show-title [title]="&#39;Some Title&#39;"></show-title>
Copier après la connexion

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

<show-title [title]="someTitle"></show-title>
Copier après la connexion
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>
Copier après la connexion

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">
Copier après la connexion

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>
Copier après la connexion

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

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal