你將學到什么

在 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>

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

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

我們使用 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 中。

Angular 中我們什么時候需要用結構指令呢？

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

最好的規(guī)則是：當我們正在考慮操作 DOM 的時候，那么是時候使用結構指令了。

總結

結構指令是 Angular 中很重要的一部分，我們可以通過多種方式使用它們。

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

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

以上就是Angular中的結構指令模式及使用詳解的詳細內容，更多關于Angular結構指令模式的資料請關注腳本之家其它相關文章！

最新評論