首頁>網頁設計教程>Javascript教程

Angular中結構指令怎麼使用？

作者：Eve Cole 更新時間：2023-04-04 10:28:14

這篇文章帶大家了解Angular 中結構指令模式，介紹一下結構指令是什麼且怎麼使用，希望對大家有幫助！

63036ae8287d7167.jpg

前端（vue）入門到精通課程：進入學習

在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中很重要的一部分，我們可以透過多種方式使用它們。

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

相關文章