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

你将学到什么

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

Myshopping: string = '';

我们有一个 MyShopping 变量,它有一个默认值,用于在模块中渲染满足条件的特定元素。

当条件值是 true 的时候,相关的元素就会被渲染到 DOM 中,其余的元素将被忽略。如果没有元素匹配,则渲染 *ngSwitchDefault 的元素到 DOM 中。

Angular 中我们什么时候需要用结构指令呢?

如果你想在 DOM 中添加或者移除一个元素的时候,你就应该使用结构指令。 当然,我们还可以使用它们来更改元素 CSS 样式,或者添加事件监听器。甚至可以使用它们来创建一个之前不存在的新的元素。

最好的规则是:当我们正在考虑操作 DOM 的时候,那么是时候使用结构指令了。

总结

结构指令是 Angular 中很重要的一部分,我们可以通过多种方式使用它们。

希望通过本文,读者能更好理解怎么去使用这些指令和什么时候去使用这些模式。

本文为译文,采用意译的形式。原文地址:Angular Structural Directive Patterns – What They Are and How to Use Them

作者:Jimmy

%s 个评论

要回复文章请先登录注册