极客angular知识分享（1）--内置指令（上）

内置指令（上）

ngIf

1. 用法

<div *ngIf="expr">
</div>

2. 意义：'表达式为true， 则宿主元素以及内容包含在html文档中'
3. 代码

<!-- ngIf -->
<div *ngIf="count > 1">
ngIf 表达式成立！
</div>

※ 表达式为false，html文档中宿主元素以及内容会被删除；如果仅仅放在那里控制宿主的可见
性，可以使用属性或样式绑定。

ngSwitch

1. 用法

<div [ngSwitch]="expr">
<span *ngSwitchCase="expr">
</span>
<span *ngSwitchDefault>
</span>
</div>

2. 意义：根据表达式的结果，在多个候选元素中选中一个包含到html文档中，如果没有匹配的就选
中ngSwitchDefalt指定的宿主元素
3. 代码

<!-- ngSwitch -->
<div [ngSwitch]="count">
<span *ngSwitchCase="1">
数量为1
</span>
<span *ngSwitchDefault>
数量不确定
</span>
</div>

※注意case里用是表达式，注意如字符串需要加引号进行比较，这里count是数值型