Déclarations de modèle

Une déclaration de modèle répond à un événement déclenché par une cible de liaison, telle qu'un élément, un composant ou une directive. Vous verrez des instructions de modèle dans la section de liaison d'événement , apparaissant entre guillemets à droite du symbole = , comme dans (event)="statement".

src / app / app.component.html

Une déclaration de modèle a un effet secondaire. C'est tout l'intérêt d'un événement. Comment vous mettez à jour l'état de l'application à partir d'une action de l'utilisateur ?

La réponse aux événements est l'autre côté du "flux de données unidirectionnel" d'Angular. Vous êtes libre de changer n'importe quoi, n'importe où, pendant ce tournant de la boucle de l'événement.

Comme les expressions de modèle, les instructions de modèle utilisent un langage qui ressemble à JavaScript. L'analyseur d'instruction de modèle diffère de l'analyseur d'expression de modèle et prend en charge à la fois les affectations de base assignation (=) et les expressions de chaînage (avec ; ou ,).

Cependant, certaines syntaxes JavaScript ne sont pas autorisées:

• new
• incrémenter et décrémenter les opérateurs ++ et --
• affectation d'opérateur, telle que += et -=
• les opérateurs de bits | et &
• les opérateurs d'expression de modèle

Contexte de la déclaration

Comme pour les expressions, les instructions ne peuvent faire référence qu'à ce qu'il contient, comme une méthode de gestion des événements de l'instance de composant.

Le contexte de l'instruction est généralement l'instance du composant. Le deleteActeur dans (click)="deleteActeur()" une méthode de la composante liée aux données.

src / app / app.component.html

Le contexte de l'instruction peut également faire référence à des propriétés propre du contexte du modèle. Dans les exemples suivants, le $event de l'objet modèle, une variable d'entrée de modèle let hero et une variable de référence de modèle #heroForm sont transmises à une méthode de gestion des événements du composant.

src / app / app.component.html

Les noms de contexte de modèle ont priorité sur les noms de contexte de composant.
deleteHero(hero), hero est la variable d'entrée du modèle, pas la propriété hero du composant. Les instructions de modèle ne peuvent faire référence à rien dans l'espace de noms global. Ils ne peuvent pas se référer à window ou document. Ils ne peuvent pas appeler console.log ou Math.max.

Instructions de déclaration

Comme pour les expressions, évitez d'écrire des instructions de modèle complexes. Un appel de méthode ou une simple affectation de propriété devrait être la norme.