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 :
<element ng-if="Condition"></element>
Les instructions conditionnelles doivent être true ou false .
<div *ngIf="worker" class="name">{{worker.name}}</div> Angular génère un élément <ng-template> puis applique la directive *ngIf . Cela le convertit en une liaison de propriété entre crochets [] , telle que [ngIf] . Le reste du <div> , y compris le nom de la classe, est inséré dans <ng-template> . Par exemple:
<ng-template [ngIf]="worker">
<div class="name">{{worker.name}}</div>
</ng-template> Pour utiliser des directives structurelles, nous devons ajouter un élément avec la directive dans le modèle HTML . Ensuite, ajoutez, supprimez ou remplacez des éléments en fonction des conditions ou expressions que nous avons définies dans la directive.
Ajoutons du code HTML simple.
Le contenu du fichier app.component.html est le suivant :
<div style="text-align:center"> <h1> Accueillir </h1> </div> <h2> <app-illustrations></app-illustrations></h2>
*ngIf Nous utilisons *ngIf pour déterminer s'il faut afficher ou supprimer un élément en fonction des conditions. ngIf est très similaire à if-else .
La directive *ngIf supprime les éléments HTML lorsque l'expression est false . Lorsque true , une copie de l'élément sera ajoutée DOM .
Le code *ngIf complet est le suivant :
<h1> <button (click)="toggleOn =!toggleOn">illustration ng-if</button> </h1> <div *ngIf="!toggleOn"> <h2>Bonjour </h2> <p>Bonjour à vous, cliquez sur le bouton pour voir</p> </div> <hr> <p>Aujourd'hui, c'est lundi et ceci est un élément de texte factice pour que vous vous sentiez mieux</p> <p>Comprendre la directive ngIf avec la clause else</p>
*ngFor Nous utilisons la directive *ngFor pour parcourir le tableau. Par exemple:
<ul>
<li *ngFor="laisser le wok des travailleurs">{{ wok }}</li>
</ul> Notre fichier 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 {
}
}*ngSwitchTraducteur ajouté : cette commande est très utile dans le développement réel
Nous utilisons ngSwitch 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:
<div [ngSwitch]="Monshopping"> <p *ngSwitchCase="'cups'">tasses</p> <p *ngSwitchCase="'veg'">Légumes</p> <p *ngSwitchCase="'clothes'">Pantalon</p> <p *ngSwitchDefault>Mes achats</p> </div>
En typescript :
Mon shopping : string = '';
Nous avons une variable 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.
Lorsque la valeur de la condition est 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 .
Si vous souhaitez ajouter ou supprimer un élément 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.
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' Angular et nous pouvons les utiliser de plusieurs manières.
J'espère qu'à travers cet article, les lecteurs pourront mieux comprendre comment utiliser ces instructions et quand utiliser ces modes.