内置指令

Angular 本身内置了一些指令，但也可以使用 @Directive() 装饰器来定义自己的指令。
在这里，我们只介绍一些在实际开发中使用频率较高的内置指令。

NgIf

添加或删除元素（或组件）。
如果 ngIf 为 false，则删除该元素及其后代，否则正常显示。

例子：

// html
<p *ngIf="textShow">Everything is fine</p>

// ts
textShow = true;

ngIf 并非是简单的隐藏元素，而是销毁元素，从而释放内存，因此，ngIf 经常会用于阻止那些空值元素的显示。

例子：

// html
<p *ngIf="textContent">{{ textContent }}</p>

// ts
textContent = 'Everything is fine';

NgFor

复写某个元素或组件。
使用时需要将 ngFor 应用于需要复写的单个元素或组件上。

例子：

// html
<ul>
  <li *ngFor="let name of userList">{{ name }}</li>
</ul>

// ts
userList = ['Tom', 'Mess', 'Amy'];

有时，我们需要获取列表的索引值，可以使用下面的方式：

例子：

<li *ngFor="let name of userList; let i = index">{{ i }}</li>

NgIf 与 NgFor 共同使用

在实际工作中，经常会遇到：当条件为 true 时，才去复写某个元素或组件。但是 Angular 不支持在一个元素上同时使用 ngFor 和 ngIf，因此可以将 ngIf 放在 ngFor 元素的父级容器上。

例子：

// html
<ul *ngIf="userList && userList.length>0">
  <li *ngFor="let name of userList">{{ name }}</li>
</ul>

// ts
userList = ['Tom', 'Mess', 'Amy'];

另一种解决方案就是引入 Angular 定义的特殊标签：ng-container。
ng-container 可以直接包裹任何元素，包括文本，但本身不会生成元素标签，更不会影响页面样式和布局。包裹的内容，如果不通过其他指令控制，会直接渲染到页面中。
ng-container 的意义就是避免添加额外的元素来使用结构指令。

例子：

// html
<ng-container *ngIf="userList && userList.length>0">
  <p *ngFor="let name of userList">{{ name }}</p>
</ng-container>

// ts
userList = ['Tom', 'Mess', 'Amy'];

NgSwitch

显示符合匹配条件的元素或组件，和 JavaScript 的 switch 语法一致。

例子：

// html
<ul [ngSwitch]="currentItem">
  <li *ngSwitchCase = "'Tom'" >Name: Tom</li>
  <li *ngSwitchCase = "'Mess'" >Name: Mess</li>
  <li *ngSwitchDefault>Name: Amy</li>
</ul>

// ts
currentItem = 'Lili';

内置属性型指令

以上内容介绍的指令，通常称为内置结构型指令，主要用于添加、移除或替换 DOM 元素来修改布局。还有一类内置指令称为内置属性型指令，主要用于修改现有元素的外观或状态：

• NgClass：添加和删除一组 className。
• NgStyle：添加和删除一组 CSS 样式。
• NgModel：将数据双向绑定添加到 HTML 表单元素。

这部分内置指令，在实际工作中使用的比较少，而且完全可以使用样式绑定（模板之样式绑定）去替换，在此就不进行详细讲解。

end