Property binding ( [property] )

Écrivez une liaison de propriété de modèle pour définir une propriété d'un élément de vue. La liaison définit la propriété sur la valeur d'une expression de modèle.

La liaison de propriété la plus commune définit une propriété d'élément sur une valeur de propriété de composant. Un exemple lie la propriété src d'un élément d'image à la propriété heroImageUrl d'un composant :

Un autre exemple est la désactivation d'un bouton lorsque le composant l'indique isUnchanged :
Une autre est la définition d'une propriété d'une directive :
Une autre solution consiste à définir la propriété model d'un composant personnalisé (un excellent moyen de communication pour les composants parents et enfants) :

One-way in (En sens unique)

Les gens décrivent souvent la liaison de propriété comme une liaison de données unidirectionnelle car elle transfère une valeur dans une direction, de la propriété de données d'un composant à une propriété d'élément cible. Vous ne pouvez pas utiliser la propriété de liaison pour extraire des valeurs hors de l'élément cible. Vous ne pouvez pas lier une propriété de l'élément cible pour le lire. Vous pouvez seulement le définir.

Binding target (Cible de liaison)

Une propriété d'élément entre crochets identifie la propriété cible.
La propriété cible dans le code suivant est la propriété src de l'élément image.

Certaines personnes préfèrent le bind-préfixe alternatif, appelé forme canonique :

Le nom cible est toujours le nom d'une propriété, même s'il semble s'agir du nom de quelque chose d'autre. Vous voyez src et pouvez penser que c'est le nom d'un attribut. Non, c'est le nom d'une propriété d'élément d'image.

Les propriétés d'élément peuvent être les cibles les plus courantes, mais Angular cherche d'abord à savoir si le nom est une propriété d'une directive connue, comme c'est le cas dans l'exemple suivant :

Éviter les effets secondaires

Comme mentionné précédemment, l'évaluation d'une expression de modèle ne doit avoir aucun effet secondaire visible. Le langage d'expression lui-même fait sa part pour assurer votre sécurité. Vous ne pouvez pas affecter de valeur à quoi que ce soit dans une expression de liaison de propriété ni utiliser les opérateurs d'incrémentation et de décrémentation.

Bien entendu, l'expression peut invoquer une propriété ou une méthode ayant des effets secondaires. Angular n'a aucun moyen de le savoir ou de vous arrêter.

L'expression pourrait appeler quelque chose comme getFoo(). Seulement vous savez ce que fait getFoo(). Si quelque chose change dans getFoo() et que vous vous y engagez, vous risquez une expérience désagréable. Angular peut ou non afficher la valeur modifiée. Angular peut détecter le changement et émettre une erreur d'avertissement. En général, tenez-vous-en aux propriétés de données et aux méthodes qui renvoient des valeurs, sans plus.

Renvoyer le bon type

L'expression de modèle doit correspondre au type de valeur attendu par la propriété cible. Renvoie une chaîne si la propriété cible attend une chaîne. Renvoie un nombre si la propriété cible attend un nombre. Renvoie un objet si la propriété cible attend un objet.

La propriété hero du composant HeroDetail attend un objet Hero, qui correspond exactement à ce que vous envoyez dans la liaison de propriété :

Rappelez-vous les crochets

Les crochets indiquent à Angular d'évaluer l'expression du modèle. Si vous omettez les crochets, Angular considère la chaîne comme une constante et initialise la propriété target avec cette chaîne. Il n'évalue pas la chaîne !

Ne faites pas l'erreur suivante:

Initialisation de chaîne unique

Vous devez omettre les parenthèses lorsque toutes les conditions suivantes sont remplies :

• La propriété target accepte une valeur de chaîne.
• La chaîne est une valeur fixe que vous pouvez intégrer au modèle.
• Cette valeur initiale ne change jamais.

Vous initialisez régulièrement les attributs de cette manière en HTML standard, et cela fonctionne tout aussi bien pour l'initialisation des propriétés de directive et de composant. L'exemple suivant initialise la propriété prefix du Component HeroDetail sur une chaîne fixe, pas une expression de modèle. Angular le définit et l'oublie.

La liaison [hero], en revanche, reste une liaison active à la propriété currentHero du composant.

Property binding ou interpolation ?

Vous avez souvent le choix entre interpolation et property binding. Les paires de liaisons suivantes font la même chose :

L'interpolation est une alternative pratique au property binding dans de nombreux cas.

Lors du rendu de valeurs de données sous forme de chaînes, il n'y a aucune raison technique de préférer un formulaire à un autre. Vous penchez vers la lisibilité, ce qui tend à favoriser l'interpolation. Vous suggérez d'établir des règles de style de codage et de choisir une forme qui soit conforme aux règles et qui semble la plus naturelle pour la tâche à accomplir.

Sécurité du contenu

Imaginez le contenu malveillant suivant.

Heureusement, le property binding Angular est en alerte pour le HTML dangereux. Il assainit les valeurs avant de les afficher. Cela n'autorisera pas le HTML avec les balises de script à pénétrer dans le navigateur, ni avec l'interpolation ni avec le property binding.

L'interpolation traite les balises de script différemment du property binding, mais les deux approches rendent le contenu inoffensif.