使用 Angular 结构指令

2022-05-11 本文已影响0人品品下午茶

在 Angular 中，指令就是具有一定功能的类，可以为 Angular 应用的其他元素添加额外的功能。我们可以使用指令操作 DOM，改变 HTML 元素的外观和行为，等等。

Angular 支持三类指令：

组件（Components）：与组件模板相关的指令，也是最常用的指令。
. 结构指令（Structural directives）：用于添加或移除 DOM 元素，从而改变 DOM 布局。
. 属性指令（Attribute directives）：修改 DOM 元素的外观，或重新定义其行为。也可以用于改变组件或其他指令的外观和行为。

结构指令

在 Angular 框架中，NgIf、NgFor 和 NgSwithch 是三个最常用的结构指令：

结构指令	说明
NgIf	根据条件，添加或移除模板中的视图元素。
NgFor	迭代一个列表中的数据项，把每一个数据项绑定到一个视图元素。
NgSwitch	根据条件，在一组候选视图元素中，显示其中一个视图元素。

NgIf

ngIf 指令可以基于表达式的计算结果，添加或移除 DOM 中的 HTML 元素。如果表达式的计算结果是 true，就会把 HTML 元素添加到 DOM 中；如果表达式的计算结果是 false，就会把 HTML 元素从 DOM 中移除。

打开 my-app 项目，编辑 src/app/book/book.component.html，修改代码如下：

<p *ngIf="name === '《三体》'">{{name}} book works!</p>
<p *ngIf="name === '《球状闪电》'">{{name}} book works!</p>
<button (click)="liked.emit(true)">喜欢</button>

*ngIf="name === '《三体》'" 表示，如果组件的 name 属性的值是《三体》，那么 <p> 标签元素就会被绘制到页面上。

应用运行效果如下：

ngIf 指令

因为我们在组件类中，设置的图书名称是《三体》，所以《三体》的视图被显示到页面上，而《球状闪电》则没有显示。

使用浏览器的开发者工具，检查图书名称段落，可以发现下面的代码：

<app-book _ngcontent-npt-c12="" _nghost-npt-c11="" ng-reflect-name="《三体》”>
    <p _ngcontent-npt-c11="">《三体》 book works!</p>
    <!--bindings={"ng-reflect-ng-if": "true”}—>
    <!--bindings={"ng-reflect-ng-if": "false”}—>
    <button _ngcontent-npt-c11="">喜欢</button>
</app-book>

Angular 在处理结构指令的地方添加了注释，这些注释作为占位符，帮助 Angular 框架放置合适的模板元素。

NgFor

我们可以使用 NgFor 指令能够循环处理数据项的集合，为每一个数据项绘制一个视图模板。

先定义一个图书的集合。打开 src/app/app.component.ts 文件，添加一个 books 属性，代码如下：

export class AppComponent {
…
  books = [
    '《三体》’,
    '《黑暗森林》’,
    '《死神永生》’,
    '《超新星纪元》’
  ]
…
}

然后，把图书集合展示到页面上。打开 src/app/app.component.html 文件，在文件最后面，添加如下内容：

<ul>
  <li *ngFor="let book of books">{{book}}</li>
</ul>

通过 ngFor 指令，我们取出 books 数组中的每一个数据项，将该数据项作为一个本地变量 book，绑定到我们的视图模板。运行效果如下：

ngFor 指令

NgSwitch

NgSwitch 能够在一组候选的视图元素中，根据条件选择一个视图元素进行显示。Angular 框架只把选中的视图元素添加到 DOM 中。

NgSwitch 包含三个指令：

指令	说明
`NgSwitch`	属性指令，能够影响其他指令的行为。
`NgSwitchCase`	结构指令，当绑定的值与计算的值相等时，添加其对应的视图元素到 DOM，否则移除该视图元素。
`NgSwitchDefault`	结构指令，当计算的值与所有 `NgSwitchCase` 都不匹配时，添加其对应的视图元素。

打开 src/app/app.component.ts 文件，在组件类对定义中，添加 specialBook 属性：

export class AppComponent {
    …
    
    specialBook = "《超新星纪元》”;
    
    …
}

打开 src/app/app.component.html 文件，在文件最后面，添加如下内容：

<div [ngSwitch]=“specialBook”>
  <p *ngSwitchCase="'《三体》'">{{specialBook}}</p>
  <p *ngSwitchCase="'《超新星纪元》'">{{specialBook}}</p>
  <p *ngSwitchCase="'《黑暗森林》'">{{specialBook}}</p>
  <p *ngSwitchDefault="'《死神永生》'">{{specialBook}}</p>
</div>

通过 ngSwitch 指令，我们计算 specialBook 的属性值，当一个 ngSwitchCase 指令的绑定值与其相同时，把该 ngSwitchCase 指令对应的视图元素添加到 DOM，并进行展示。如果没有找到任何匹配的ngSwitchCase 指令，则将 ngSwitchDefault 指令对应的视图元素添加到 DOM，并进行展示。运行效果如下：

ngSwitch 指令

参考资料

https://angular.io/guide/built-in-directives