Angular中什麼是結構指令？怎麼使用？

這篇文章帶大家了解一下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="&#39;cups&#39;">cups</p>
  <p *ngSwitchCase="&#39;veg&#39;">Vegetables</p>
  <p *ngSwitchCase="&#39;clothes&#39;">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中文網其他相關文章！