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 结构指令是什么？

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>

Angular 结构指令是怎么工作的？

要使用结构指令，我们需要在 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="&#39;cups&#39;">cups</p>
  <p *ngSwitchCase="&#39;veg&#39;">Vegetables</p>
  <p *ngSwitchCase="&#39;clothes&#39;">Trousers</p>
  <p *ngSwitchDefault>My Shopping</p>
</div>

在 typescript 中：

Myshopping: string = '';

我们有一个 MyShopping 变量，它有一个默认值，用于在模块中渲染满足条件的特定元素。

当条件值是 true 的时候，相关的元素就会被渲染到 DOM 中，其余的元素将被忽略。如果没有元素匹配，则渲染 *ngSwitchDefault 的元素到 DOM 中。

Angular 中我们什么时候需要用结构指令呢？

如果你想在 DOM 中添加或者移除一个元素的时候，你就应该使用结构指令。 当然，我们还可以使用它们来更改元素 CSSDirective d'attribut

Modifie l'apparence ou le comportement de l'élément DOM.

Directives structurellesAjoutez ou supprimez des éléments DOM. Les

🎜directives structurelles🎜 sont l'une des fonctionnalités les plus puissantes de 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🎜"]🎜

🎜Qu'allez-vous apprendre🎜

🎜Dans cet article, vous découvrirez 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 id="Que-sont-les-directives-structurelles-angulaires">🎜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 correspondante

🎜Ce qui suit est un exemple de directive structurée. La syntaxe ressemble à ceci : 🎜rrreee🎜L'instruction conditionnelle doit être true 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 : 🎜rrreee

🎜Comment fonctionnent les directives structurelles angulaires ? 🎜

🎜Pour utiliser les 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. 🎜

🎜Exemple de directives structurelles🎜

🎜Nous ajoutons du code HTML simple. 🎜🎜app.component.html Le contenu du fichier est le suivant : 🎜rrreee

🎜Comment utiliser le *ngIf command🎜

🎜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. 🎜🎜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

🎜Comment utiliser la commande *ngFor🎜 h4>🎜us Utilisez la directive *ngFor pour parcourir un tableau. Par exemple : 🎜rrreee🎜Notre fichier TypeScript de composant : 🎜rrreee

🎜Comment utiliser la directive *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. 🎜

🎜Quand devons-nous utiliser des directives structurelles dans Angular ? 🎜

🎜Si vous souhaitez ajouter ou supprimer un élément dans 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🎜. 🎜

Résumé

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!