Angular 的指令用于维护 DOM 结构。使用指令，你可以改变 DOM 元素的样式、行为或者布局。Angular 提供了三种指令：
- 组件指令
- 结构指令
- 属性指令
我们前面介绍过的组件，就是一种特殊的指令。如果你去阅读 Angular 的源代码，在 packages/core/src/metadata/directives.ts 中有这么一段足以说明问题：
/**
* Supplies configuration metadata for an Angular component.
*
* @publicApi
*/
export interface Component extends Directive { 结构指令用于改变 DOM 结构，比如增加或移除一些 DOM 元素等。结构指令通常以*开头。
属性指令可以改变一个 DOM 元素的外观或者行为，例如前面介绍过的ngStyle和ngClass。
当然，我们也可以自定义指令。
本章我们将介绍一个常用的结构指令ngIf。顾名思义，ngIf会根据一个条件控制元素的存在与否，类似于几乎所有编程语言都会提供的那个if。
ngIf语法如下：
<p *ngIf="condition"> 当 condition === true 时才会显示 </p>
ngIf可以被附加在一个 DOM 元素，上面例子中，ngIf添加在<p>标签上。ngIf是一个结构指令，这意味着它可以附加到任何 DOM 元素，div、p 以及我们自定义的组件。同所有结构指令一样，ngIf前面也要添加*。ngIf绑定一个表达式，这个表达式可以是任何语句，只不过必须返回true或者false，或者是能够转换成true或false。ngIf会计算这个表达式，根据表达式的执行结果决定其所在元素是否显示。如果表达式返回true，Angular 会将这个元素插入到 DOM 树；否则，整个元素会从 DOM 树移除。因此我们需要注意ngIf与下面代码的区别：
<p [hidden]="condition"> 当 condition === false 时显示 </p>
这两段代码看起来执行结果类似，都是根据condition的返回值，决定是否显示其所在的p元素。但其实二者差别很大：ngIf不是隐藏元素，而是将整个元素，连同它的子元素，从 DOM 树中移除，这意味着，整个元素所占用的系统资源都会被释放；hidden绑定仅仅是将元素隐藏，并不会将其从 DOM 树中移除。
ngIf同样支持逻辑非运算符：
<p *ngIf="!condition"> 当 condition !== true 时显示 </p>
ngIf支持else语法：
<div *ngIf="condition; else elseBlock"> 当 condition === true 时显示 </div> <ng-template #elseBlock> 当 condition === false 时显示 </ng-template>
这里，condition后面跟着一个分号;，然后是else关键字。else分支绑定到一个名为elseBlock的ng-template元素。注意这里的#elseBlock语法，就是前面我们提到的模板引用变量，相当于给一个ng-template元素起了一个名字。ng-template元素代表一段 HTML 片段，可以出现在模板的任何位置，不过一般会紧跟在else语句后面，以便增加代码可读性。这段代码的含义是，当condition返回true时，渲染div的内容，否则，当condition返回false时，渲染ng-template的内容。
当然，除了ngIf...else，Angular 还提供了ngIf...then...else语法：
<div *ngIf="condition; then thenBlock else elseBlock"> 这里不会显示 </div> <ng-template #thenBlock> 当 condition === true 时显示 </ng-template> <ng-template #elseBlock> 当 condition === false 时显示 </ng-template>
这里，then绑定到名为thenBlock的ng-template元素，else绑定到名字elseBlock的ng-template元素。
