Syntaxe > Interpolation {{...}}

Parcours & Expérience





Références

L'actualité

Librairie

L'information

Interpolation et expressions de modèle

L'interpolation vous permet d'incorporer des chaînes calculées dans le texte entre les balises d'élément HTML et dans les attributions d'attributs. Les expressions de modèle sont ce que vous utilisez pour calculer ces chaînes.

Interpolation {{...}}

L'interpolation fait référence à l'intégration d'expressions dans un texte marqué. Par défaut, l'interpolation utilise comme délimiteur les doubles accolades, {{ et }}.
Dans l'extrait suivant, vous trouverez un exemple d'interpolation {{ currentCustomer }}.

Le texte entre les accolades est souvent le nom d'une propriété de composant. Angular remplace ce nom par la valeur de chaîne de la propriété de composant correspondante.
Dans l'exemple ci-dessus, Angular évalue les propriétés, title et itemImageUrl et remplit les blancs, affichant d'abord un texte de titre et une image.

Plus généralement, le texte entre les accolades est une expression de modèle que Angular évalue d'abord, puis convertit en chaîne. L'interpolation suivante illustre le point en additionnant deux nombres :

L'expression peut appeler des méthodes du composant hôte, comme getVal() dans l'exemple suivant :

Angular évalue toutes les expressions entre des doubles accolades, convertit les résultats de l'expression en chaînes et les lie aux chaînes littérales voisines. Enfin, il attribue ce résultat interpolé composite à une propriété d'élément ou de directive.

Cependant, l'interpolation est une syntaxe spéciale que Angular convertit en une liaison de propriété. Si vous souhaitez utiliser autre chose que {{ et }}, vous pouvez configurer le délimiteur d'interpolation via l'option d'interpolation dans les métadonnées du Component.

Template expressions

Un modèle d'expression produit une valeur et apparaît à l'intérieur des doubles accolades {{ }}. Angular exécute l'expression et l'assigne à la propriété d'une cible de liaison. La cible peut être un élément HTML, un composant ou une directive.
Les accolades d'interpolation {{1 + 1}} entourent l'expression du modèle 1 + 1. Dans la liaison de propriété ci-dessous, une expression de modèle apparaît entre guillemets à droite de = , comme dans [property]="expression".

En termes de syntaxe, les expressions de modèle sont similaires à JavaScript. De nombreuses expressions JavaScript sont des expressions de modèle légales, à quelques exceptions près.

Vous ne pouvez pas utiliser d'expressions JavaScript ayant ou encourageant des effets secondaires, notamment :
  • Les assignations (=, +=, -=, ...)
  • Des opérateurs tels que new, typeof, instanceof, etc.
  • Chaînage d'expressions avec ; ou ,
  • Les opérations d'incrémentation et de décrémentation ( ++ et -- )
  • Quelques opérateurs ES2015 +
Les autres différences notables par rapport à la syntaxe JavaScript incluent :
  • pas de support pour les opérateurs de bits | et &
  • nouveaux opérateurs d'expression de modèle tels que |, ? et !.

Contexte d'expression

Le contexte d'expression est généralement l'instance du composant. Dans les extraits suivants, le recommended entre doubles accolades et les itemImageUrl2 entre guillemets renvoient aux propriétés de AppComponent.

src / app / app.component.html
Une expression peut également faire référence à des propriétés du contexte du modèle, telles qu'une variable d'entrée de modèle, let customer ou une variable de référence du modèle #customerInput.

src/app/app.component.html (template input variable)
src/app/app.component.html (template reference variable)

Le contexte des termes dans une expression est un mélange de variables de modèle, de l'objet de contexte de la directive (le cas échéant) et des membres du composant. Si vous faites référence à un nom appartenant à plusieurs de ces espaces de noms, le nom de la variable de modèle est prioritaire, suivi d'un nom dans le contexte de la directive et, enfin, des noms de membre du composant.

L'exemple précédent présente une telle collision de noms. Le composant a une propriété customer et le *ngFor définit une variable de modèle.

Le {{customer.name}} fait référence à la variable d'entrée du modèle, pas à la propriété du composant.

Les expressions de modèle ne peuvent faire référence à rien dans l'espace de noms global, à l'exception de undefined. Ils ne peuvent pas se référer à window ou document. De plus, ils ne peuvent pas appeler console.log() ou Math.max() et ils sont limités à référencer les membres du contexte d'expression.

Aucun effet secondaire visible

Une expression de modèle ne doit modifier aucun état d'application autre que la valeur de la propriété cible.

Cette règle est essentielle à la politique de "flux de données unidirectionnel" d'Angular. Vous ne devez jamais craindre que la lecture d'une valeur de composant puisse modifier une autre valeur affichée. La vue doit être stable tout au long d'une seule passe de rendu.

Une expression idempotente est idéale car elle est exempte d'effets secondaires et améliore les performances de détection des changements d'Anngular.

En termes Angular, une expression idempotente retourne toujours exactement la même chose jusqu'à ce que l'une de ses valeurs dépendant change.

Les valeurs dépendantes ne doivent pas changer pendant un tour de la boucle d'événement. Si une expression idempotente renvoie une chaîne ou un nombre, elle renvoie la même chaîne ou le même nombre d'appels lorsqu'elle est appelée deux fois de suite. Si l'expression renvoie un objet, y compris un array, elle renvoie la même référence à l'objet lorsqu'elle est appelée deux fois de suite.

Exécution rapide

Angular exécute les expressions de modèle après chaque cycle de détection de changement. Les cycles de détection de changement sont déclenchés par de nombreuses activités asynchrones telles que les résolutions de promesses, les résultats HTTP, les événements de minuterie, les appuis sur les touches et les déplacements de la souris.

Les expressions doivent se terminer rapidement, en particulier sur les périphériques plus lents. Pensez à mettre en cache des valeurs lorsque leur calcul est coûteux.

Simplicité

Bien qu'il soit possible d'écrire des expressions de modèles complexes, il est préférable de les éviter.

Un nom de propriété ou un appel de méthode devrait être la norme, mais une négation booléenne occasionnelle est OK. Sinon, limitez la logique applicative et métier au composant, où il est plus facile de développer et de tester.