Angular的結(jié)構(gòu)指令如何使用

這篇文章主要介紹“Angular的結(jié)構(gòu)指令如何使用”，在日常操作中，相信很多人在Angular的結(jié)構(gòu)指令如何使用問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”Angular的結(jié)構(gòu)指令如何使用”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

在 Angular 中，有兩種類型的指令。屬性指令修改 DOM 元素的外觀或者行為。結(jié)構(gòu)指令添加或者移除 DOM 元素。

結(jié)構(gòu)指令是 Angular 中最強大的特性之一，然而它們卻頻繁被誤解。

Angular 結(jié)構(gòu)指令是什么？

Angular 結(jié)構(gòu)指令是能夠更改 DOM 結(jié)構(gòu)的指令。這些指令可以添加、移除或者替換元素。結(jié)構(gòu)指令在其名字之前都有 * 符號。

在 Angular 中，有三種標準的結(jié)構(gòu)化指令。

• *ngIf - 根據(jù)表達式返回的布爾值，有條件地包含一個模版（即條件渲染模版）

• *ngFor - 遍歷數(shù)組

• *ngSwitch - 渲染每個匹配的是圖

下面?是一個結(jié)構(gòu)化指令的例子。語法長這樣：

 <element ng-if="Condition"></element>

條件語句必須是 true 或者 false。

<div *ngIf="worker" class="name">{{worker.name}}</div>

Angular 生成一個 <ng-template> 的元素，然后應(yīng)用 *ngIf 指令。這會將其轉(zhuǎn)換為方括號 [] 中的屬性綁定，比如 [ngIf]。<div> 的其余部分，包含類名，插入到 <ng-template> 里。比如：

<ng-template [ngIf]="worker">
  <div class="name">{{worker.name}}</div>
</ng-template>

Angular 結(jié)構(gòu)指令是怎么工作的？

要使用結(jié)構(gòu)指令，我們需要在 HTML 模版中添加一個帶有指令的元素。然后根據(jù)我們在指令中設(shè)置的條件或者表達式添加、刪除或者替換元素。

結(jié)構(gòu)指令的例子

我們添加些簡單的 HTML 代碼。

app.component.html 文件內(nèi)容如下：

<div style="text-align:center">
  <h2>
    Welcome 
  </h2>
</div>
<h3> <app-illustrations></app-illustrations></h3>

怎么使用 *ngIf 指令

我們根據(jù)條件來使用 *ngIf 來確定展示或者移除一個元素。ngIf 跟 if-else 很類似。

當表達式是 false 的時候，*ngIf 指令移除 HTML 元素。當為 true 時候，元素的副本會添加到 DOM 中。

完整的*ngIf 代碼如下：

<h2>
	<button (click)="toggleOn =!toggleOn">ng-if illustration</button>
  </h2>
  <div *ngIf="!toggleOn">
  <h3>Hello </h3>
  <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 指令來遍歷數(shù)組。比如：

<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 指令

譯者加：這個指令實際開發(fā)很有用

我們使用 ngSwitch 來根據(jù)不同條件聲明來決定渲染哪個元素。*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 的時候，相關(guān)的元素就會被渲染到 DOM 中，其余的元素將被忽略。如果沒有元素匹配，則渲染 *ngSwitchDefault 的元素到 DOM 中。

Angular 中我們什么時候需要用結(jié)構(gòu)指令呢？

如果你想在 DOM 中添加或者移除一個元素的時候，你就應(yīng)該使用結(jié)構(gòu)指令。 當然，我們還可以使用它們來更改元素 CSS 樣式，或者添加事件監(jiān)聽器。甚至可以使用它們來創(chuàng)建一個之前不存在的新的元素。

最好的規(guī)則是：當我們正在考慮操作 DOM 的時候，那么是時候使用結(jié)構(gòu)指令了。

到此，關(guān)于“Angular的結(jié)構(gòu)指令如何使用”的學習就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續(xù)學習更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>