Cet article vous présentera le modèle de directive structurelle dans Angular, vous présentera ce qu'est la directive structurelle et comment l'utiliser, j'espère qu'il vous sera utile !
Entrée front-end (vue) au cours de maîtrise : entrez dans l'apprentissage
Dans Angular , il existe deux types de directives. Les directives d'attribut modifient l'apparence ou le comportement des éléments DOM . Les directives structurelles ajoutent ou suppriment des éléments DOM .
Les directives structurelles sont l'une des fonctionnalités les plus puissantes d' Angular , mais elles sont souvent mal comprises.
Si vous souhaitez en savoir plus sur les directives de structure, poursuivons notre lecture et découvrons ce qu'elles sont, à quoi elles servent et comment les utiliser dans vos projets. [Tutoriels associés recommandés : "tutoriel angulaire"]
Dans cet article, vous découvrirez le modèle de directive structurelle Angular . Vous saurez ce qu'ils sont et comment les utiliser.
Après avoir étudié cet article, vous comprendrez mieux ces instructions et les utiliserez dans des projets réels.
Les directives structurelles Angular sont des directives qui peuvent modifier la structure DOM . Ces instructions peuvent添加、移除或者替换元素. Les directives structurelles ont un symbole * devant leur nom.
Dans Angular , il existe trois directives structurées standard.
*ngIf - Inclut conditionnellement un modèle basé sur la valeur booléenne renvoyée par l'expression (c'est-à-dire le rendu conditionnel du modèle)
*ngFor - parcourir un tableau
*ngSwitch - Rend chaque graphique correspondant
Vous trouverez ci-dessous un exemple de directive structurée. La syntaxe ressemble à ceci :
Les instructions conditionnelles doivent être true ou false .
{{worker.name}}
Pour utiliser des directives structurelles, nous devons ajouter un élément avec la directive dans le modèle Ajoutons du code Le contenu du fichier Nous utilisons La directive Le code Bonjour à vous, cliquez sur le bouton pour voir Aujourd'hui, c'est lundi et ceci est un élément de texte factice pour que vous vous sentiez mieux Comprendre la directive ngIf avec la clause else Nous utilisons la directive Notre fichier Traducteur ajouté : cette commande est très utile dans le développement réel Nous utilisons tasses Légumes Pantalon Mes achats En Nous avons une variable Lorsque la valeur de la condition est Si vous souhaitez ajouter ou supprimer un élément La meilleure règle est la suivante : lorsque nous envisageons de manipuler le DOM, il est temps d'utiliser des directives structurelles . Les directives structurelles sont une partie importante d' J'espère qu'à travers cet article, les lecteurs pourront mieux comprendre comment utiliser ces instructions et quand utiliser ces modes.Angular génère un élément *ngIf . Cela le convertit en une liaison de propriété entre crochets [] , telle que [ngIf] . Le reste du , y compris le nom de la classe, est inséré dans
{{worker.name}}
Comment fonctionnent les directives structurelles angulaires ?
HTML . Ensuite, ajoutez, supprimez ou remplacez des éléments en fonction des conditions ou expressions que nous avons définies dans la directive. Exemples de directives structurelles
HTML simple.app.component.html est le suivant :
Accueillir
Comment utiliser la directive
*ngIf*ngIf pour déterminer s'il faut afficher ou supprimer un élément en fonction des conditions. ngIf est très similaire à if-else .*ngIf supprime les éléments HTML lorsque l'expression est false . Lorsque true , une copie de l'élément sera ajoutée DOM .*ngIf complet est le suivant :
Bonjour
Comment utiliser la directive
*ngFor*ngFor pour parcourir le tableau. Par exemple:
TypeScript de composant : importer { Component, OnInit } depuis '@angular/core' ;
@Composant({
sélecteur : 'app-illustrations',
templateUrl : './illustrations.component.html',
styleUrls : ['./illustrations.component.css']
})
classe d'exportation IllustrationsComponent implémente OnInit {
travailleurs : n'importe lequel = [
'travailleur 1',
'travailleur 2',
'travailleur 3',
'travailleur 4',
'travailleur 5',
]
constructeur() { }
ngOnInit() : vide {
}
} Comment utiliser la directive
*ngSwitchngSwitch pour décider quel élément restituer en fonction de différentes instructions conditionnelles. La directive *ngSwitch est très similaire à switch que nous utilisons. Par exemple:
typescript : Mon shopping : string = '';
MyShopping qui a une valeur par défaut et est utilisée pour restituer des éléments spécifiques du module qui remplissent les conditions.true , les éléments pertinents seront restitués dans DOM et les éléments restants seront ignorés. Si aucun élément ne correspond, l'élément *ngSwitchDefault est rendu dans DOM . Quand devons-nous utiliser des directives structurelles dans Angular ?
DOM , vous devez utiliser des directives de structure. Bien sûr, nous pouvons également les utiliser pour modifier les styles CSS des éléments ou ajouter des écouteurs d'événements. Vous pouvez même les utiliser pour créer un nouvel élément qui n'existait pas auparavant. Résumer
Angular et nous pouvons les utiliser de plusieurs manières.