這篇文章帶大家了解一下Angular 中結構指令模式，介紹一下結構指令是什麼且怎麼使用，希望對大家有所幫助！
在 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="'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 樣式，或新增事件監聽器。甚至可以使用它們來創建一個之前不存在的新的元素。
最好的規則是：
當我們正在考慮操作 DOM 的時候，那麼是時候使用結構指令了。
總結
結構指令是 Angular 中很重要的一部分，我們可以透過多種方式使用它們。
希望透過本文，讀者能更好地理解怎麼去使用這些指令和什麼時候去使用這些模式。
本文為譯文，以意譯的形式。
原文網址：https://www.freecodecamp.org/news/angular-structural-directive-patterns-what-they-are-and-how-to-use-them/
#更多程式相關知識，請造訪：程式設計影片！ ！
以上是Angular中什麼是結構指令？怎麼使用？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
