Angular 学习之路 14 – ngSwitch

前面我们介绍了ngIfngFor,作为某种一一对应的关系,今天我们将介绍另外一个结构指令:ngSwitchngSwitch完全可以使用ngIf替代,只不过在某一条件具有多种情形的时候,ngSwitch会更加方便使用。ngSwitch允许根据定义好的条件显示一个或多个 DOM 元素。

ngSwitch实际包含了三个指令,下面展示了ngSwitch的基本语法:

<container-element [ngSwitch]="switch-expression">
  <inner-element *ngSwitchCase="match-expresson-1">...</inner-element>
  <inner-element *ngSwitchCase="match-expresson-2">...</inner-element>
  <inner-element *ngSwitchCase="match-expresson-3">...</inner-element>
  <inner-element *ngSwitchDefault>...</element>
</container-element>

ngSwitch作用于container_element这样的容器元素,例如div。我们将switch_expression绑定到ngSwitch,Angular 会在运行时根据switch_expression的结果,在 DOM 树中添加或移除相应的节点。ngSwitchCase必须出现在ngSwitch的内部,绑定到inner_element。因为它是结构指令,所以必须以*开头。Angular 会根据match_expression的匹配情况,从 DOM 树中添加或移除节点,而不仅仅是隐藏。注意,match_expression是会在运行时计算的,因此,如果有多个匹配,那么所有的匹配都会显示出来。ngSwitchDefault也必须出现在ngSwitch内部,如果所有的ngSwitchCase都不匹配,那么,ngSwitchDefault所在的元素就会被显示出来。注意,ngSwitchDefault不一定非得出现在最后,也不一定只有一个。如果有多个ngSwitchDefault,那么,所有的ngSwitchDefault都会显示。

除了绑定到ngSwitchCasengSwitchDefault的元素,ngSwitch中出现在任何元素都会被显示出来。另外,Angular 在检测条件匹配时使用的是宽松比较,而不是严格比较。这意味着,空字符串和 0 是相等的。

不同的ngSwitchCase之间也可以共享模板片段,这需要使用ngTeemplateOutlet来实现。这一点我们会在后面的章节详细介绍。

下面是ngSwitch基本使用的示例:

import { Component, OnInit } from '@angular/core';

@Component({
  templateUrl: './syntax.component.html',
  styleUrls: ['./syntax.component.css']
})
export class SyntaxComponent implements OnInit {

  num = '0';

  constructor() { }

  ngOnInit(): void {
  }

}
Input string : <input type='text' [(ngModel)]="num" />

<div [ngSwitch]="num">
  <div *ngSwitchCase="'1'">One</div>
  <div *ngSwitchCase="'2'">Two</div>
  <div *ngSwitchCase="'3'">Three</div>
  <div *ngSwitchCase="'4'">Four</div>
  <div *ngSwitchCase="'5'">Five</div>
  <div *ngSwitchDefault>This is Default</div>
</div>
ngSwitch 运行结果

上面的代码,我们使用双向绑定,将<input>的用户输入值与num绑定起来,然后利用ngSwitch按照用户的输入显示不同内容。

Leave a Reply