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