Was sind Strukturanweisungen in Angular? Wie benutzt man?

Dieser Artikel führt Sie durch das Strukturdirektivenmuster in Angular und stellt Ihnen vor, was die Strukturdirektive ist und wie Sie sie verwenden. Ich hoffe, dass er Ihnen hilfreich sein wird!

In Angular gibt es zwei Arten von Anweisungen. 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 中添加或者移除一个元素的时候，你就应该使用结构指令。 当然，我们还可以使用它们来更改元素 CSSAttribute-Direktive

Ändern Sie das Erscheinungsbild oder Verhalten des DOM-Elements.

StrukturanweisungenFügen Sie DOM-Elemente hinzu oder entfernen Sie sie.

🎜Strukturanweisungen🎜 sind eine der mächtigsten Funktionen in Angular, werden jedoch häufig missverstanden. 🎜🎜Wenn Sie daran interessiert sind, 🎜Strukturanweisungen🎜 zu lernen, dann lesen Sie weiter und finden Sie heraus, was sie sind, wofür sie verwendet werden und wie Sie sie in Ihren Projekten verwenden. [Verwandte Tutorial-Empfehlungen: „🎜Angular-Tutorial🎜“]🎜

🎜Was werden Sie lernen🎜

🎜In diesem Artikel erfahren Sie mehr über Angular Code> Wissenspunkte des Strukturanweisungsmusters. Sie wissen, was sie sind und wie man sie verwendet. 🎜🎜Nachdem Sie diesen Artikel studiert haben, werden Sie diese Anweisungen besser verstehen und sie in tatsächlichen Projekten verwenden können. 🎜<h3 id="Was-sind-Angular-Strukturanweisungen">🎜Was sind Angular-Strukturanweisungen? 🎜</h3>🎜<code>Angular-Strukturanweisungen sind Anweisungen, die die Struktur von DOM ändern können. Diese Anweisungen fügen Elemente hinzu, entfernen oder ersetzen. Strukturanweisungen haben *-Symbole vor ihren Namen. 🎜🎜In Angular gibt es drei standardmäßige strukturierte Anweisungen. 🎜

• *ngIf – Fügen Sie bedingt eine Vorlage (d. h. eine bedingte Rendering-Vorlage) ein, basierend auf dem booleschen Wert, der vom Ausdruck zurückgegeben wird
• *ngFor – Das Array durchlaufen
• *ngSwitch – Jedes übereinstimmende Bild rendern

🎜Das Folgende ist ein Beispiel für eine strukturierte Direktive. Die Syntax sieht so aus: 🎜rrreee🎜Die bedingte Anweisung muss true oder false sein. 🎜rrreee🎜Angular generiert ein <ng-template>-Element und wendet dann die *ngIf-Direktive an. Dadurch wird es in eine Eigenschaftsbindung in eckigen Klammern [] konvertiert, beispielsweise [ngIf]. Der Rest von <div>, einschließlich des Klassennamens, wird in <ng-template> eingefügt. Zum Beispiel: 🎜rrreee

🎜Wie funktionieren Angular-Strukturanweisungen? 🎜

🎜Um strukturelle Direktiven zu verwenden, müssen wir ein Element mit der Direktive in der HTML-Vorlage hinzufügen. Fügen Sie dann Elemente hinzu, löschen oder ersetzen Sie sie basierend auf den Bedingungen oder Ausdrücken, die wir in der Direktive festlegen. 🎜

🎜Beispiel für Strukturanweisungen🎜

🎜Wir fügen einfachen HTML-Code hinzu. 🎜🎜app.component.html Der Inhalt der Datei ist wie folgt: 🎜rrreee

🎜So verwenden Sie den *ngIf Befehl🎜

🎜Wir verwenden *ngIf, um basierend auf Bedingungen zu bestimmen, ob ein Element angezeigt oder entfernt werden soll. ngIf ist if-else sehr ähnlich. 🎜🎜Wenn der Ausdruck false ist, entfernt die *ngIf-Direktive das HTML-Element. Wenn true, wird eine Kopie des Elements zum DOM hinzugefügt. 🎜🎜Der vollständige *ngIf-Code lautet wie folgt: 🎜rrreee

🎜So verwenden Sie den Befehl *ngFor🎜 h4>🎜us Verwenden Sie die Direktive *ngFor, um über ein Array zu iterieren. Zum Beispiel: 🎜rrreee🎜Unsere Komponenten-TypeScript-Datei: 🎜rrreee

🎜So verwenden Sie die *ngSwitch-Direktive🎜 h4>

🎜Übersetzer hinzugefügt: Dieser Befehl ist in der tatsächlichen Entwicklung sehr nützlich🎜

🎜Wir verwenden ngSwitch, um basierend auf verschiedenen bedingten Anweisungen zu entscheiden, welches Element gerendert werden soll. Die *ngSwitch-Direktive ähnelt stark der von uns verwendeten switch-Anweisung. Zum Beispiel: 🎜rrreee🎜In typescript: 🎜rrreee🎜Wir haben eine MyShopping-Variable mit einem Standardwert, der zum Rendern bestimmter Elemente verwendet wird, die die Bedingung im Modul erfüllen . 🎜🎜Wenn der Bedingungswert true ist, werden die relevanten Elemente in DOM gerendert und die verbleibenden Elemente werden ignoriert. Wenn kein Element übereinstimmt, wird das Element *ngSwitchDefault in DOM gerendert. 🎜

🎜Wann müssen wir Strukturanweisungen in Angular verwenden? 🎜

🎜Wenn Sie ein Element im DOM hinzufügen oder entfernen möchten, sollten Sie Strukturanweisungen verwenden. Natürlich können wir sie auch verwenden, um Element-CSS-Stile zu ändern oder Ereignis-Listener hinzuzufügen. Sie können sie sogar verwenden, um ein neues Element zu erstellen, das vorher nicht existierte. 🎜🎜Die beste Regel ist: 🎜Wenn wir darüber nachdenken, das DOM zu manipulieren, dann ist es Zeit, strukturelle Anweisungen zu verwenden🎜. 🎜

Zusammenfassung

Strukturelle Richtlinien sind ein sehr wichtiger Teil von Angular und wir können sie auf vielfältige Weise nutzen.

Ich hoffe, dass die Leser durch diesen Artikel besser verstehen können, wie diese Anweisungen verwendet werden und wann diese Modi verwendet werden.

Dieser Artikel ist eine Übersetzung in Form einer kostenlosen Übersetzung.

Originaladresse: https://www.freecodecamp.org/news/angular-structural-directive-patterns-what-they-are-and-how-to-use-them/

Weitere programmierbezogene Kenntnisse, Bitte besuchen Sie: Programmiervideos! !

Das obige ist der detaillierte Inhalt vonWas sind Strukturanweisungen in Angular? Wie benutzt man?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!