Angular中的結(jié)構(gòu)指令模式及使用詳解

更新時間：2022年08月23日 09:49:17 作者：Jimmy

這篇文章主要為大家介紹了Angular中的結(jié)構(gòu)指令模式及使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

你將學(xué)到什么

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

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

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

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

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

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

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

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

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

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

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

條件語句必須是 true 或者 false。

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

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

比如：

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

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

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

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

我們添加些簡單的 HTML 代碼。

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

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

怎么使用 *ngIf 指令

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

當(dāng)表達式是 false 的時候，*ngIf 指令移除 HTML 元素。當(dāng)為 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 指令來遍歷數(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 指令

譯者加：這個指令實際開發(fā)很有用

我們使用 ngSwitch 來根據(jù)不同條件聲明來決定渲染哪個元素。*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 中：