clic
lorsque vous pouvez écrire une liaison simple comme celle-ci ?RouterModule
et FormsModule
définissent leurs propres directives d'attribut.
Cette section est une introduction aux directives d'attribut les plus couramment utilisées:NgClass
- ajouter et supprimer un ensemble de classes CSSNgStyle
- ajouter et supprimer un ensemble de styles HTMLNgModel
- liaison de données bidirectionnelle à un élément de formulaire HTMLngClass
pour ajouter ou supprimer plusieurs classes simultanément.
Une liaison de classe est un bon moyen d'ajouter ou de supprimer une seule classe.src / app / app.component.html
NgClass
peut être le meilleur choix.ngClass
à un objet clé : valeur de contrôle.
Chaque clé de l'objet est un nom de classe CSS; sa valeur est true
si la classe doit être ajoutée, false
si elle doit être supprimée.setCurrentClasses
qui définit une propriété de composant
currentClasses
avec un objet qui ajoute ou supprime trois classes en fonction du true
/ false
de trois autres propriétés de composant :src / app / app.component.ts
ngClass
de liaison pour définir les currentClasses
de l'élément en conséquence :src / app / app.component.html
setCurrentClasses()
, à la fois initialement et lorsque les propriétés dépendantes changent.NgStyle
vous pouvez définir plusieurs styles en ligne simultanément.src / app / app.component.html
NgStyle
peut être le meilleur choix.setCurrentStyles
qui définit une propriété de composant
currentStyles
avec un objet qui définit trois styles,
en fonction de l'état de trois autres propriétés de composant :src / app / app.component.ts
ngStyle
de liaison pour définir currentStyles
(les styles) de l'élément en conséquence :src / app / app.component.html
setCurrentStyles()
, à la fois initialement et lorsque les propriétés dépendantes changent.
src / app / app.component.html (NgModel-1)
ngModel
dans une liaison de données bidirectionnelle,
vous devez importer le FormsModule
et l'ajouter à la liste imports de NgModule
.FormsModule
pour rendre disponible [(ngModel)]
.src / app / app.module.ts (importation FormsModule)
name
, notez que vous auriez pu obtenir le même résultat avec des liaisons séparées à la propriété et à l'événement de l'élément ‹input›
.src/app/app.component.html
ngModel
et de sortie ngModelChange
.src/app/app.component.html
ngModel
est une amélioration par rapport à la liaison aux propriétés natives de l'élément.data
.
Angular devrait pouvoir capturer la propriété data
du composant et la définir
avec une seule déclaration, qu'il peut utiliser avec la syntaxe suivante : [(ngModel)]
src/app/app.component.html
[(ngModel)]
ne peut définir qu'une propriété liée aux données.
Si vous avez besoin de faire quelque chose de plus ou de différent, vous pouvez écrire le formulaire développé.src/app/app.component.html
*
).‹ng-container›
pour regrouper des éléments lorsqu'il n'y a pas d'élément hôte approprié pour la directive.NgIf
- ajouter ou supprimer conditionnellement un élément du DOMNgSwitch
- un ensemble de directives permettant de basculer entre des vues alternativesNgForOf
- répète un modèle pour chaque élément de la listeNgIf
à cet élément (appelé élément hôte).
Liez la directive à une expression de condition comme isActive
.src / app / app.component.html
*
) devant ngIf
.
isActive
renvoie une valeur de vérité, NgIf
ajoute le Componentau HeroDetail
au DOM.
Lorsque l'expression est false
, NgIf
supprime le Component HeroDetail
du DOM, détruisant ce composant et tous ses sous-composants.src / app / app.component.html
NgIf
.NgIf
est false
, Angular supprime l'élément et ses descendants du DOM.
Il détruit leurs composants, ce qui libère potentiellement des ressources et permet une expérience utilisateur plus réactive.NgIf
peut être le choix le plus sûr.ngIf
est souvent utilisée pour se protéger contre null
.
Angular génèrera une erreur si une expression imbriquée tente d'accéder à une propriété null
.NgIf
garder deux ‹div›
.
Le nom currentHero
n'apparaîtra que s'il y a un currentHero
.
Le nullHero
ne sera jamais affiché.src / app / app.component.html
ngFor
est une directive repeater, un moyen de présenter une liste d'éléments.
Vous définissez un bloc HTML qui définit le mode d'affichage d'un seul élément.
Vous dites à Angular d'utiliser ce bloc comme modèle pour restituer chaque élément de la liste.ngFor
à un simple ‹div›
:src / app / app.component.html
ngFor
à un élément, comme dans cet exemple :src / app / app.component.html
*
) devant ngFor
.
*ngFor "let hero of heroes"
signifie : let
précédent hero
crée une variable d'entrée modèle appelée hero
.
La directive NgForOf
parcourt le tableau heroes
renvoyé par la propriété heroes
du composant parent et définit l'élément hero
actuel du tableau lors de chaque itération.hero
d'entrée dans l'élément NgForOf
hôte (et dans ses descendants)
pour accéder aux propriétés du héros. Ici, il est référencé en premier dans une interpolation,
puis passé dans une liaison à la propriété hero
du composant ‹hero-detail›
.src / app / app.component.html
index
du contexte de directive NgForOf
renvoie l'index de base zéro de l'élément à chaque itération.
Vous pouvez capturer la variable index
d'entrée dans un modèle et l'utiliser dans le modèle.i
et l'affiche avec le nom du héros comme celui-ci.src / app / app.component.html
NgFor
est mis en oeuvre par la directive NgForOf
.
En savoir plus sur les autres valeurs de contexte NgForOf
telles que last
, even
et odd
dans la référence API NgForOf.NgForOf
risque d'être médiocre, en particulier avec les grandes listes.
Une petite modification apportée à un élément, un élément supprimé ou un élément ajouté peut déclencher une cascade de manipulations DOM.trackBy
.
Ajouter une méthode à la composante qui retourne la valeur NgForOf
doit suivre.
Dans ce cas, cette valeur appartient au hero.id
src / app / app.component.html
trackBy
.src / app / app.component.html
trackBy
hero.id
hero.id
.trackBy
, les deux boutons déclenchent le remplacement complet de l'élément DOM.trackBy
, ne change que l'id des éléments déclencheurs remplacement.NgSwitch
est comme la déclaration JavaScript switch
.
Il peut afficher un élément parmi plusieurs éléments possibles, en fonction d'une condition de commutation.
Angular place uniquement l'élément sélectionné dans le DOM.NgSwitch
est en fait un ensemble de trois directives coopérant: NgSwitch
, NgSwitchCase
et NgSwitchDefault
comme on le voit dans cet exemple.src / app / app.component.html
NgSwitch
est la directive du contrôleur. Liez-le à une expression qui renvoie la valeur du commutateur.
La valeur emotion dans cet exemple est une chaîne, mais la valeur du commutateur peut être de tout type.[ngSwitch]
.*ngSwitch
car NgSwitch
est une directive d'attribut, pas une directive structurelle.
Cela change le comportement de ses directives compagnons. Cela ne touche pas directement le DOM. *ngSwitchCase
et *ngSwitchDefault
.NgSwitchCase
et NgSwitchDefault
sont des directives structurelles car elles ajoutent ou suppriment des éléments du DOM.NgSwitchCase
ajoute son élément au DOM lorsque sa valeur liée est égale à la valeur du commutateur.NgSwitchDefault
ajoute son élément au DOM lorsqu'il n'y a pas de sélection NgSwitchCase
.hero-switch.components.ts
.
Chaque composant a une hero
propriété d'entrée liée au composant currentHero parent.src / app / app.component.html