Maison >interface Web >js tutoriel >Que sont les directives structurelles dans Angular ? Comment utiliser ?
Cet article vous présentera le modèle de directive structurelle dans Angular et vous présentera ce qu'est la directive structurelle et comment l'utiliser. J'espère qu'il vous sera utile !
Dans Angular
, il existe deux types de directives. Angular
中,有两种类型的指令。属性指令修改 DOM
元素的外观或者行为。结构指令添加或者移除 DOM
元素。
结构指令是 Angular
中最强大的特性之一,然而它们却频繁被误解。
如果你对学习 结构指令 感兴趣,那么现在我们就来接着阅读,并了解它们是什么,它们有什么用以及如何在项目中使用它们。【相关教程推荐:《angular教程》】
在本文中,你将学到关于 Angular
结构指令模式的知识点。你会知道它们是什么并且怎么去使用它们。
学完本文,你将更好理解这些指令并在实际项目中使用它们。
Angular
结构指令是能够更改 DOM
结构的指令。这些指令可以添加、移除或者替换元素
。结构指令在其名字之前都有 *
符号。
在 Angular
中,有三种标准的结构化指令。
*ngIf
- 根据表达式返回的布尔值,有条件地包含一个模版(即条件渲染模版)*ngFor
- 遍历数组*ngSwitch
- 渲染每个匹配的是图下面?是一个结构化指令的例子。语法长这样:
<element ng-if="Condition"></element>
条件语句必须是 true
或者 false
。
<div *ngIf="worker" class="name">{{worker.name}}</div>
Angular
生成一个 <ng-template>
的元素,然后应用 *ngIf
指令。这会将其转换为方括号 []
中的属性绑定,比如 [ngIf]
。<div>
的其余部分,包含类名,插入到 <ng-template>
里。比如:
<ng-template [ngIf]="worker"> <div class="name">{{worker.name}}</div> </ng-template>
要使用结构指令,我们需要在 HTML
模版中添加一个带有指令的元素。然后根据我们在指令中设置的条件或者表达式添加、删除或者替换元素。
我们添加些简单的 HTML
代码。
app.component.html
文件内容如下:
<div style="text-align:center"> <h1> Welcome </h1> </div> <h2> <app-illustrations></app-illustrations></h2>
*ngIf
指令我们根据条件来使用 *ngIf
来确定展示或者移除一个元素。ngIf
跟 if-else
很类似。
当表达式是 false
的时候,*ngIf
指令移除 HTML
元素。当为 true
时候,元素的副本会添加到 DOM
中。
完整的*ngIf
代码如下:
<h1> <button (click)="toggleOn =!toggleOn">ng-if illustration</button> </h1> <div *ngIf="!toggleOn"> <h2>Hello </h2> <p>Good morning to you,click the button to view</p> </div> <hr> <p>Today is Monday and this is a dummy text element to make you feel better</p> <p>Understanding the ngIf directive with the else clause</p>
*ngFor
指令我们使用 *ngFor
指令来遍历数组。比如:
<ul> <li *ngFor="let wok of workers">{{ wok }}</li> </ul>
我们的组件 TypeScript
文件:
import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-illustrations', templateUrl: './illustrations.component.html', styleUrls: ['./illustrations.component.css'] }) export class IllustrationsComponent implements OnInit { workers: any = [ 'worker 1', 'worker 2', 'worker 3', 'worker 4', 'worker 5', ] constructor() { } ngOnInit(): void { } }
*ngSwitch
指令译者加:这个指令实际开发很有用
我们使用 ngSwitch
来根据不同条件声明来决定渲染哪个元素。*ngSwitch
指令很像我们使用的 switch
语句。比如:
<div [ngSwitch]="Myshopping"> <p *ngSwitchCase="'cups'">cups</p> <p *ngSwitchCase="'veg'">Vegetables</p> <p *ngSwitchCase="'clothes'">Trousers</p> <p *ngSwitchDefault>My Shopping</p> </div>
在 typescript
中:
Myshopping: string = '';
我们有一个 MyShopping
变量,它有一个默认值,用于在模块中渲染满足条件的特定元素。
当条件值是 true
的时候,相关的元素就会被渲染到 DOM
中,其余的元素将被忽略。如果没有元素匹配,则渲染 *ngSwitchDefault
的元素到 DOM
中。
如果你想在 DOM
中添加或者移除一个元素的时候,你就应该使用结构指令。 当然,我们还可以使用它们来更改元素 CSS
Directive d'attribut
DOM
. Directives structurellesAjoutez ou supprimez des éléments DOM
. Les
Angular
, mais elles sont souvent mal comprises. 🎜🎜Si vous souhaitez apprendre les 🎜directives structurelles🎜, lisons la suite et apprenons ce qu'elles sont, à quoi elles servent et comment les utiliser dans vos projets. [Recommandations de didacticiel associées : "🎜Tutoriel angulaire🎜"]🎜Angular code> Points de connaissance du modèle d'instruction structurelle. 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. 🎜<h3 data-id="heading-1">🎜Que sont les directives structurelles angulaires ? 🎜</h3>🎜Les directives structurelles <code>Angular
sont des directives qui peuvent changer la structure du DOM
. Ces directives ajoutent, suppriment ou remplacent des éléments
. Les directives structurelles ont des symboles *
avant leur nom. 🎜🎜Dans Angular
, il existe trois directives structurées standards. 🎜*ngIf
- Inclut conditionnellement un modèle (c'est-à-dire un modèle de rendu conditionnel) basé sur la valeur booléenne renvoyée par l'expression*ngFor - Parcourir le tableau
*ngSwitch
- Rendre chaque image correspondantetrue
ou false
. 🎜rrreee🎜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 de <div>
, y compris le nom de la classe, est inséré dans <ng-template>
. Par exemple : 🎜rrreeeHTML
. Ensuite, ajoutez, supprimez ou remplacez des éléments en fonction des conditions ou expressions que nous avons définies dans la directive. 🎜HTML
simple. 🎜🎜app.component.html
Le contenu du fichier est le suivant : 🎜rrreee*ngIf
command🎜*ngIf
pour déterminer s'il faut afficher ou supprimer un élément en fonction des conditions. ngIf
est très similaire à if-else
. 🎜🎜Lorsque l'expression est false
, la directive *ngIf
supprime l'élément HTML
. Lorsque true
, une copie de l'élément est ajoutée au DOM
. 🎜🎜Le code *ngIf
complet est le suivant : 🎜rrreee*ngFor
🎜 h4>🎜us Utilisez la directive *ngFor
pour parcourir un tableau. Par exemple : 🎜rrreee🎜Notre fichier TypeScript
de composant : 🎜rrreee*ngSwitch
🎜 h4> 🎜Traducteur ajouté : cette commande est très utile dans le développement réel🎜🎜Nous utilisons
ngSwitch
pour décider quel élément rendre en fonction de différentes instructions conditionnelles. La directive *ngSwitch
ressemble beaucoup à l'instruction switch
que nous utilisons. Par exemple : 🎜rrreee🎜Dans typescript
: 🎜rrreee🎜Nous avons une variable MyShopping
qui a une valeur par défaut utilisée pour restituer des éléments spécifiques qui répondent à la condition dans le module . 🎜🎜Lorsque la valeur de la condition est true
, les éléments pertinents seront rendus dans DOM
et les éléments restants seront ignorés. Si aucun élément ne correspond, l'élément *ngSwitchDefault
est rendu dans DOM
. 🎜DOM
, vous devez utiliser des directives de structure. Bien sûr, nous pouvons également les utiliser pour modifier les styles d'éléments CSS
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 pensons à manipuler le DOM, il est temps d'utiliser des directives structurelles🎜. 🎜 Les directives structurelles sont une partie très importante de 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.
Cet article est une traduction, sous forme de traduction libre.
Adresse originale : https://www.freecodecamp.org/news/angular-structural-directive-patterns-what-they-are-and-how-to-use-them/
Plus de connaissances liées à la programmation, Veuillez visiter : Vidéos de programmation ! !
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!