Les liaisons angulaires sont un mécanisme extrêmement puissant intégré au cadre. Malheureusement, ils peuvent être difficiles à retenir. Cet article de blog d'Alyssa Nicoll aidera.
Angular fournit un mécanisme puissant pour une large gamme de reliures. Vous n’êtes pas obligé d’être nouveau pour oublier quelle liaison est quelle liaison. Parfois, lorsque je cherche la bonne liaison, je me trompe ou j'oublie la syntaxe. Je pensais qu'un article pourrait aider à clarifier comment et quand appliquer des liaisons dans vos applications Angular, pour ces moments de mémoire que nous avons tous parfois.
Vous trouverez ci-dessous un tableau pratique pour une référence rapide (lié à chaque section):
Il inclut tous les types de liaisons angulaires, ainsi qu'une ligne de balises indiquant comment utiliser ces liaisons. Nous traiterons de toutes les liaisons plus en détail dans les sections ci-dessous, à l'exception de la liaison d'attribut, que j'ai trouvé assez rare.
Liaison de propriété
Dans Angular, la liaison la plus simple est la liaison de propriété. Il utilise des crochets `[ ]` pour faire le travail. Il s'agit d'une liaison à sens unique entre le composant et le modèle.
Interpolation de chaîne et liaison de propriété
Vous pouvez également utiliser l'interpolation de chaîne pour obtenir la même liaison de propriété:
L'interpolation de chaîne convient mieux au texte entre les éléments d'ouverture et de fermeture:
{{amazingTitle}} 19659011] Cette même approche peut être utilisée via une liaison de propriété, mais elle est moins intuitive. Dans l'exemple ci-dessus, nous pouvons obtenir le même résultat avec l'attribut textContent :
En définitive, il s'agit d'une préférence personnelle. Les boutons de Kendo UI tirent parti de différents types de liaisons de propriétés afin de vous permettre de personnaliser l'aspect de nos boutons. Par exemple, vous pouvez définir [icon] sur un nombre quelconque d'icônes ( trouvé ici ). Vous pouvez également définir le bouton [look] du bouton sur le contour plat ou le défaut ! Pour en savoir plus sur l'impressionnant bouton personnalisable de l'interface de Kendo cliquez ici .
Nous utilisons ici une interpolation de chaîne pour lier la valeur du bouton. En même temps, nous utilisons des liaisons de propriétés pour les icônes et look . Il est important de mentionner que les deux types de liaison sont des liaisons à sens unique; du composant au modèle. Vous devrez faire preuve de discrétion pour le type de liaison que vous utilisez. Encore une fois, cela dépend des préférences personnelles.
Reliure de style
Un autre type de liaison de propriété est la liaison de style.Vous pouvez ajouter des styles en ligne à la logique! Si nous souhaitons appliquer des styles en ligne à ce bouton, nous pouvons le faire entre crochets:
Dans l'exemple ci-dessus, la couleur d'arrière-plan a été remplacée par rebeccaPurple mais toute valeur de couleur acceptable pour les CSS (HEX, RGB, etc.) fonctionnera. Vérifiez W3Schools pour. une liste complète des propriétés de style DOM auxquelles vous pouvez vous connecter.
Voyons maintenant le même exemple, mais avec une certaine logique:
Ici, nous lions la couleur de fond. pour rebeccaPurple uniquement si la variable estActive est true . Sinon, la couleur d'arrière-plan est définie sur white .
La reliure de style est donc une propriété qui lie le style [style.PROPERTY] suivie de la propriété que vous souhaitez modifier.
Vous pouvez jouer avec les reliures de style dans ce StackBlitz!
Les commentaires sont désactivés en mode Aperçu.
Source link