如何在 Angular 8 中使用指令？

---

指令在 Angular 8 中是可以在模板中為元素新增新行為的類。指令用於操作 DOM。我們可以使用指令來更改 DOM 元素的行為和外觀。簡單來說，我們可以使用 HTML 來使用指令。

使用指令，我們可以實現可重用性、可讀性和可維護性。指令將在整個應用程式中提供高水平的可重用性。這將有助於大型應用程式，例如許多地方需要相同的功能。

指令有三種類型：

• 元件指令

• 屬性指令

• 結構指令

我們還可以根據需要建立自定義指令。使用 @Directive 裝飾器，我們將建立自定義指令。

讓我們詳細瞭解每種指令。

元件指令

元件指令是帶有模板的指令。這些用於主類中。這包含有關如何在執行時處理和使用元件的詳細資訊。

結構指令

結構指令用於更改 DOM 元素的設計模式。使用這些指令，我們可以重新設計和重新裝飾 DOM 元素。我們可以使用結構指令來操作和構建 DOM。內建指令例如 ngIf、ngFor 和 ngSwitch。

在程式碼中使用結構指令時，我們在其前面使用 * 符號。

Angular *ngIf 指令

ngIf 指令將根據布林值（即 true 或 false）顯示 DOM。它允許我們新增或刪除 DOM 元素。

示例

在 app.component.html 檔案中新增程式碼。例如：

<div>
   <hp>Structural Directives</p>
   <div *ngIf="true">
      <p>Text will be displayed</p>
   </div>
   <div *ngIf="false">
      <p>Text will be hidden</p>
   </div>
</div>

在app.component.ts檔案中。無需編寫，保持如下

import { Component } from "@angular/core";
@Component({
   selector: "app-root",
   templateUrl: "./app.component.html",
   styleUrls: ["./app.component.css"]
})
export class AppComponent {}

輸出

Structural Directives
Text will be displayed

Angular *ngFor 指令

ngFor 指令用於對來自集合的每個專案重複 HTML 模板一次。

示例

在app.component.html檔案中新增程式碼

<div>
   <p>Strutural Directives</p>
   <div *ngFor="let fruit of names">
      <p>{{ fruit }}</p>
   </div>
</div>

在app.component.ts檔案中定義名稱

import { Component } from "@angular/core";
@Component({
   selector: "app-root",
   templateUrl: "./app.component.html",
   styleUrls: ["./app.component.css"]
})
export class AppComponent {
   names = ["Banana", "Grapes", "Orange", "Mango", "Apple"];
}

輸出

Strutural Directives
Banana
Grapes
Orange
Mango
Apple

示例

在app.component.html檔案中新增程式碼。例如：

<div>
   <p>Strutural Directives</p>
   <label>Select marital status</label>
   <div *ngFor="let s of status">
      <input type="radio" [value]="s" id="{{s}}" />
      <label for="{{s}}">{{s}}</label>
   </div>
   <br />
   <label>Select nationality</label>
   <div *ngFor="let n of nationality">
      <input type="radio" [value]="n" id="{{n}}" />
      <label for="{{n}}">{{n}}</label>
   </div>
</div>

在app.component.ts檔案中定義狀態和國籍，例如

import { Component } from "@angular/core";
@Component({
   selector: "app-root",
   templateUrl: "./app.component.html",
   styleUrls: ["./app.component.css"]
})
export class AppComponent {
   status = ["Single", "Married", "Widow"];
   nationality = ["Indian", "Other"];
}

Angular ngSwitch 指令

ngSwitch 指令用於在 ngSwitch 內部的表示式定義的多個 case 之間顯示。如果沒有任何表示式匹配，它將顯示預設值。

示例

在 app.component.html 中編寫程式碼。例如：

<div>
   <p>Strutural Directives</p>
   <div [ngSwitch]="case">
      <div *ngSwitchCase="0">Display 0</div>
      <div *ngSwitchCase="1">Display 1</div>
      <div *ngSwitchCase="2">Display 2</div>
      <div *ngSwitchDefault>Display</div>
   </div>
</div>

在app.component.ts檔案中定義 case 值，例如

import { Component } from "@angular/core";
@Component({
   selector: "app-root",
   templateUrl: "./app.component.html",
   styleUrls: ["./app.component.css"]
})
export class AppComponent {
   case = "1";
}

輸出

Strutural Directives
Display 1

屬性指令

屬性指令用於更改 DOM 元素的外觀和行為。例如，ngClass 和 ngStyle。

示例：ngClass 指令

ngClass 指令用於新增或刪除 HTML 元素的類。

在app.component.html檔案中

<div>
   <p>Attribute Directives</p>
   <p [ngClass]="'value > 10 ? showRed : showGreen'">{{ value }}</p>
</div>

在app.component.ts檔案中，為 value 變數分配一些數字。例如：

import { Component } from "@angular/core";
@Component({
   selector: "app-root",
   templateUrl: "./app.component.html",
   styleUrls: ["./app.component.css"]
})
export class AppComponent {
   value: number = 8;
}

在app.component.css檔案中，設定一些顏色以便於識別輸出

.showRed{
   font-weight: bold;
   color: red;
}
.showGreen{
   font-weight: bold;
   color: green;
}

輸出

Attribute Directives
8

如果我們給出的值大於 10，則輸出將以紅色顯示。

示例：ngStyle 指令

ngStyle 用於向 HTML 元素新增樣式。我們可以使用 ngStyle 設定一個或多個樣式屬性。讓我們看下面的例子。

在app.component.html檔案中

<div>
   <h1>Attribute Directives</h1>
   <ul *ngFor="let fruit of fruits">
      <li [ngStyle]="{'color':setColor(fruit)}">{{fruit}}</li>
   </ul>
</div>

在app.component.ts檔案中，在 export class 內定義 fruits 和 setColor()。例如：

import { Component } from "@angular/core";
@Component({
   selector: "app-root",
   templateUrl: "./app.component.html",
   styleUrls: ["./app.component.css"]
})
export class AppComponent {
   fruits = ["Banana", "Mango", "Apple", "Kiwi", "Orange"];
   setColor(color: string) {
      switch (color) {
         case "Banana":
         return "yellow";
         case "Mango":
         return "yellow";
         case "Apple":
         return "green";
         case "Orange":
         return "orange";
         case "kiwi":
         return "green";
         default:
         return "blue";
      }
   }
}

輸出

我們也可以建立自己的自定義結構指令和屬性指令。

在上面，我們檢查了什麼是指令以及如何在 Angular 程式碼中使用它們。指令用於更改 DOM 元素的行為和結構，並且 Angular 提供了一些內建指令。我們還可以建立自定義指令。