Angular中的结构指令模式及如何使用详解

发布时间：2024-03-06 17:58:48 来源：网络

.

你将学到什么在 Angular 中，有两种类型的指令。属性指令修改 DOM 元素的外观或者行为。结构指令添加或者移除 DOM 元素。结构指令是 Angula

你将学到什么

在 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>

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 中：