你將學(xué)到什么

在 Angular 中，有兩種類(lèi)型的指令。屬性指令修改 DOM 元素的外觀(guān)或者行為。結(jié)構(gòu)指令添加或者移除 DOM 元素。

結(jié)構(gòu)指令是 Angular 中最強(qiáng)大的特性之一，然而它們卻頻繁被誤解。

如果你對(duì)學(xué)習(xí) 結(jié)構(gòu)指令 感興趣，那么現(xiàn)在我們就來(lái)接著閱讀，并了解它們是什么，它們有什么用以及如何在項(xiàng)目中使用它們。

在本文中，你將學(xué)到關(guān)于 Angular 結(jié)構(gòu)指令模式的知識(shí)點(diǎn)。你會(huì)知道它們是什么并且怎么去使用它們。

學(xué)完本文，你將更好理解這些指令并在實(shí)際項(xiàng)目中使用它們。

Angular 結(jié)構(gòu)指令是什么？

Angular 結(jié)構(gòu)指令是能夠更改 DOM 結(jié)構(gòu)的指令。這些指令可以添加、移除或者替換元素。結(jié)構(gòu)指令在其名字之前都有 * 符號(hào)。

在 Angular 中，有三種標(biāo)準(zhǔn)的結(jié)構(gòu)化指令。

• *ngIf - 根據(jù)表達(dá)式返回的布爾值，有條件地包含一個(gè)模版（即條件渲染模版）
• *ngFor - 遍歷數(shù)組
• *ngSwitch - 渲染每個(gè)匹配的是圖

下面??是一個(gè)結(jié)構(gòu)化指令的例子。語(yǔ)法長(zhǎng)這樣：

 <element ng-if="Condition"></element>

條件語(yǔ)句必須是 true 或者 false。

<div *ngIf="worker" class="name">{{worker.name}}</div>

Angular 生成一個(gè) <ng-template> 的元素，然后應(yīng)用 *ngIf 指令。這會(huì)將其轉(zhuǎn)換為方括號(hào) [] 中的屬性綁定，比如 [ngIf]。<div> 的其余部分，包含類(lèi)名，插入到 <ng-template> 里。

比如：

<ng-template [ngIf]="worker">
  <div class="name">{{worker.name}}</div>
</ng-template>

Angular 結(jié)構(gòu)指令是怎么工作的？

要使用結(jié)構(gòu)指令，我們需要在 HTML 模版中添加一個(gè)帶有指令的元素。然后根據(jù)我們?cè)谥噶钪性O(shè)置的條件或者表達(dá)式添加、刪除或者替換元素。

結(jié)構(gòu)指令的例子

我們添加些簡(jiǎn)單的 HTML 代碼。

app.component.html 文件內(nèi)容如下：

<div style="text-align:center">
  <h1>
    Welcome 
  </h1>
</div>
<h2> <app-illustrations></app-illustrations></h2>

怎么使用 *ngIf 指令

我們根據(jù)條件來(lái)使用 *ngIf 來(lái)確定展示或者移除一個(gè)元素。ngIf 跟 if-else 很類(lèi)似。

當(dāng)表達(dá)式是 false 的時(shí)候，*ngIf 指令移除 HTML 元素。當(dāng)為 true 時(shí)候，元素的副本會(huì)添加到 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 指令來(lái)遍歷數(shù)組。比如：

<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 指令

譯者加：這個(gè)指令實(shí)際開(kāi)發(fā)很有用

我們使用 ngSwitch 來(lái)根據(jù)不同條件聲明來(lái)決定渲染哪個(gè)元素。*ngSwitch 指令很像我們使用的 switch 語(yǔ)句。比如：

<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 = '';

我們有一個(gè) MyShopping 變量，它有一個(gè)默認(rèn)值，用于在模塊中渲染滿(mǎn)足條件的特定元素。

當(dāng)條件值是 true 的時(shí)候，相關(guān)的元素就會(huì)被渲染到 DOM 中，其余的元素將被忽略。如果沒(méi)有元素匹配，則渲染 *ngSwitchDefault 的元素到 DOM 中。

Angular 中我們什么時(shí)候需要用結(jié)構(gòu)指令呢？

如果你想在 DOM 中添加或者移除一個(gè)元素的時(shí)候，你就應(yīng)該使用結(jié)構(gòu)指令。 當(dāng)然，我們還可以使用它們來(lái)更改元素 CSS 樣式，或者添加事件監(jiān)聽(tīng)器。甚至可以使用它們來(lái)創(chuàng)建一個(gè)之前不存在的新的元素。

最好的規(guī)則是：當(dāng)我們正在考慮操作 DOM 的時(shí)候，那么是時(shí)候使用結(jié)構(gòu)指令了。

總結(jié)

結(jié)構(gòu)指令是 Angular 中很重要的一部分，我們可以通過(guò)多種方式使用它們。

希望通過(guò)本文，讀者能更好理解怎么去使用這些指令和什么時(shí)候去使用這些模式。

本文為譯文，采用意譯的形式。原文地址：Angular Structural Directive Patterns – What They Are and How to Use Them

以上就是Angular中的結(jié)構(gòu)指令模式及使用詳解的詳細(xì)內(nèi)容，更多關(guān)于Angular結(jié)構(gòu)指令模式的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論