*
) précède le nom de l'attribut de directive comme dans cet exemple.*ngIf
.
Vous apprendrez dans ce guide que l'astérisque ( *
) est une notation pratique et que la chaîne est une microsyntaxe plutôt que l'expression de modèle habituelle.
Dans Angular cette notation dans un balisage NgIf
, NgFor
et NgSwitch
.UpperCamelCase
et lowerCamelCase
.
Vous avez déjà vu NgIf
et ngIf
.
Il y a une raison. NgIf
fait référence à la classe de directive ; ngIf
fait référence au nom d'attribut de la directive.NgIf
).
Le nom d'attribut d'une directive est orthographié dans lowerCamelCase (ngIf
).
Le guide fait référence à la classe de directive quand on parle de ses propriétés et de ce que fait la directive.
Le guide fait référence au nom de l' attribut lorsque vous décrivez comment vous appliquez la directive à un élément du modèle HTML.NgStyle
intégrée modifie plusieurs styles d'élément en même temps.style.display
sur none
.
NgIf
.*
) du nom de la directive et vous vous demandez pourquoi il est nécessaire et ce qu'il fait.
*ngIf
en un élément ‹ng-template›
, enroulé autour de l'élément hôte, comme ceci.
*ngIf
a été déplacée vers l'élément ‹ng-template›
ou elle est devenue une liaison de propriété, [ngIf]
.‹div›
, y compris son attribut de classe, s'est déplacé à l'intérieur de l'élément ‹ng-template›
contenu lors de son rendu réel et l'a remplacé par un commentaire de diagnostic.
Les directives NgFor
et NgSwitch
suivent le même schéma.*ngFor
de la même manière que la syntaxe astérisque ( *
) en élément ‹ng-template›
.NgFor
, écrit dans les deux sens :ngIf
et à juste titre.
La directive NgFor
comporte plus de fonctionnalités, obligatoires et facultatives, que la directive NgIf
présentée.
Au minimum, NgFor
a besoin d'une variable en boucle (let hero
) et d'une liste (heroes
).ngFor
, que vous écrivez dans la microsyntaxe d'Angular.ngFor
reste dans l'élément hôte (‹div›
)
à mesure qu'il se déplace à dans le ‹ng-template›
.
Dans cet exemple, la [ngClass]="odd"
reste sur le ‹div›
.‹ng-template›
:let
déclare une variable d'entrée de modèle à laquelle vous faites référence dans le modèle.
Les variables d'entrée dans cet exemple sont hero
, i
et odd
.
L'analyseur traduit let hero
, let i
et let odd
en variables appelées, let-hero
, let-i
et let-odd
.
of
et trackBy
(of
-> Of
, trackBy
-> TrackBy
)
et les préfixe avec le nom d'attribut de la directive ( ngFor
), ce qui donne les noms ngForOf
et ngForTrackBy
.
Ce sont les noms de deux propriétés d'entrée NgFor.
C'est ainsi que la directive apprend que la liste est constituée de héros et que la fonction de suivi par piste est trackById
.
NgFor
parcourt la liste, elle définit et réinitialise les propriétés de son propre objet de contexte.
Ces propriétés incluent index
et odd
et une propriété spéciale nommée $implicit
.
let-i
et let-odd
sont définies comme suit : let i=index
et let odd=odd
.
Angular les définit sur la valeur actuelle de index
et des propriétés odd
.
let-hero
n'a pas été spécifiée.
Sa source prévue est implicite.
Angular définit let-hero
sur la valeur de la propriété $implicit
du contexte que NgFor
a initialisée avec le heros pour l'itération en cours.
NgFor
et de contexte.
NgFor
est mis en oeuvre par la directive NgForOf
.
Pour en savoir plus sur les propriétés de directive NgForOf
supplémentaires et les propriétés de contexte,
référence de l'API NgForOf.
NgIf
et NgForOf
est un excellent moyen d'en savoir plus.hero
, i
et odd
.
Tous sont précédés du mot clé let
.let
(let hero
).
La portée de la variable est limitée à une seule instance du modèle.
Vous pouvez utiliser à nouveau le même nom de variable dans la définition d'autres directives structurelles.#
( #var
).
Une variable de référence fait référence à son élément, composant ou directive attaché.
Vous pouvez y accéder n'importe où dans le modèle entier.hero
de let hero
n'est pas la même variable que le hero
déclaré comme #hero
.
*ngFor
et un *ngIf
sur le même élément hôte.
Angular ne vous laissera pas faire.
Vous ne pouvez appliquer qu'une seule directive structurelle à un élément.NgIf
ou le NgFor
?
Le NgIf
peut-il annuler l'effet du NgFor
?
Si tel est le cas (et il semble que cela devrait être le cas), comment Angular devrait-il généraliser la possibilité d'annuler d'autres directives structurelles ?*ngIf
sur un conteneur qui enveloppe l'élément *ngFor
.
Un ou les deux éléments peuvent être un ng-container
afin de ne pas avoir à introduire de niveaux supplémentaires de HTML.NgSwitch
est en fait un ensemble de directives de coopération: NgSwitch, NgSwitchCaseet NgSwitchDefault.
Voici un exemple :
NgSwitch
( hero.emotion
) détermine le cas échéant des commutations affichés.NgSwitch
elle-même n'est pas une directive structurelle.
C'est une directive attribut qui contrôle le comportement des deux autres directives switch
.
C'est pourquoi vous écrivez [ngSwitch]
, jamais *ngSwitch
.NgSwitchCase
et NgSwitchDefault
sont des directives structurelles.
Vous les attachez à des éléments en utilisant la notation de préfixe astérisque ( *
).
Un NgSwitchCase
affiche son élément hôte lorsque sa valeur correspond à la valeur du commutateur.
Le NgSwitchDefault
affiche son élément hôte lorsqu'aucun NgSwitchCase
ne correspond à la valeur du commutateur.‹happy-hero›
est l'élément d'accueil pour les *ngSwitchCase
.
Le ‹unknown-hero›
est l'élément hôte pour le *ngSwitchDefault
.NgSwitchCase
et NgSwitchDefault
peuvent
être supprimés dans le ‹ng-template›
.*
) est plus claire que la forme désaspérée.
Utilisez ‹ng-container›
lorsqu'il n'y a pas un seul élément pour héberger la directive.‹ng-template›
et comprend son fonctionnement.
Vous vous référerez à la ‹ng-template›
lorsque vous écrivez votre propre directive structurelle.‹ng-template›
est un élément Angular pour le rendu HTML
.
Il n'est jamais affiché directement.
En fait, avant de rendre la vue, Angular remplace le ‹ng-template›
et son contenu par un commentaire.‹ng-template›
,
ces éléments disparaissent.‹li›
) est un élément hôte typique d'un répéteur NgFor
.HTML
natif,
tel qu'un ‹div›
, et attacher la directive à cet encapsuleur.‹span›
ou, ‹div›
pour regrouper les éléments sous une seule racine, est généralement sans danger.
Habituellement, mais pas toujours.CSS
n'attendent ni ne prennent en charge la nouvelle présentation.
Par exemple, supposons que vous disposiez de la disposition de paragraphe suivante.CSS
qui s'applique à ‹span›
ou un paragraph ‹p›
.p span
, destiné à être utilisé ailleurs, a été appliqué ici par inadvertance.HTML
nécessitent que tous les enfants immédiats soient d'un type spécifique.
Par exemple, l'élément ‹select›
nécessite des enfants ‹option›
.
Vous ne pouvez pas envelopper les options dans un conditionnel ‹div›
ou un ‹span›
.‹option›
dans un ‹span›
.‹ng-container›
est un élément de regroupement qui n'interfère pas
avec les styles ou la mise en page, car Angular ne le met pas dans le DOM
.
Voici le paragraphe conditionnel, cette fois en utilisant ‹ng-container›
.‹option›
avec ‹ng-container›
.‹ng-container›
est un élément de syntaxe reconnu par l'analyseur Angular.
Ce n'est pas une directive, un composant, une classe ou une interface. Cela ressemble plus aux accolades d'un bloc if
JavaScript :‹ng-container›
répond à un besoin similaire dans les modèles Angular.UnlessDirective
structurelle qui fait le contraire de NgIf
.
NgIf
affiche le contenu du modèle lorsque la condition est true
.
UnlessDirective
affiche le contenu lorsque la condition est false
.
Directive
(au lieu du décorateur Component
).Input
, TemplateRef
et les symboles ViewContainerRef
; vous en aurez besoin pour toute directive structurelle.[appUnless]
.
Les crochets définissent un sélecteur d'attribut CSS
.lowerCamelCase
et commencer par un préfixe.
Ne pas utiliser ng
.
Ce préfixe appartient à Angular.
Choisissez quelque chose de court qui vous convient ou à votre entreprise.
Dans cet exemple, le préfixe est app
.Directive
le guide de style.
Les propres directives d'Angular ne le font pas.‹ng-template›
et insère
cette vue dans un conteneur de vues adjacent à l'élément ‹p›
hote d'origine de la directive.‹ng-template›
avec TemplateRef
et accéderez au conteneur de vues par le biais de ViewContainerRef
.[appUnless]
.
Cela signifie que la directive a besoin d'une propriété appUnless
, décorée avec @Input
.appUnless
chaque fois que la valeur de la condition change.
Parce que la propriété appUnless
fonctionne, il faut un passeur.appUnless
, elle n'a donc pas besoin d'un getter
.false
, le paragraphe supérieur ( A
) apparaît et le paragraphe ( B
) disparaît.
Lorsque la conditionvérité est trouvée, le paragraphe ( A
) est supprimé et le paragraphe ( B
) apparaît.