前面我们介绍了ngIf和ngFor，作为某种一一对应的关系，今天我们将介绍另外一个结构指令：ngSwitch。ngSwitch完全可以使用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都会显示。
除了绑定到ngSwitchCase和ngSwitchDefault的元素，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>
上面的代码，我们使用双向绑定，将<input>的用户输入值与num绑定起来，然后利用ngSwitch按照用户的输入显示不同内容。
