前言
指令也是NG的核心部分之一，它可以用来对模板内容进行逻辑控制。结合数据绑定使用，基本就告别了手动操作DOM的时代，转而进入了美好的数据驱动的前端高效开发时代。
分类
- 属性形指令
可以监听或修改其它 HTML 元素、特性 (attribute)、属性 (property)、组件的行为。例如ngClass和ngStyle指令。
- 结构性指令
负责塑造HTML 结构。一般通过添加、删除或者操作 HTML 元素及其子元素来实现。例如ngIf和ngFor指令。
- 组件
带有模板的指令，用于组合程序逻辑和 HTML 模板，渲染出应用的视图。
应用
ngClass和ngStyle指令之前我们介绍了，让我们看看其他指令如何使用吧~
- 微模板指令
通过在指令前面加星号，是一种语法糖。NG会解开这个语法糖，变成一个<ng-template>，里面包裹着宿主元素及其子元素。
- *ngIf="表达式"
表达式为真的时候展现内容，这是个微模板指令。
*ngIf="getProductCount()" else="表达式2"(NG4+)
- [ngSwitch]="表达式" *ngSwitchCase="表达式2" *ngSwitchDefault
根据表达式和表达式2的匹配多选一展示内容，这是个微模板指令。使用字面量要用单引号。
<div [ngSwitch]="getProductCount()">
<span *ngSwitchCase="2">There are two products</span>
<span *ngSwitchCase="5">There are five products</span>
<span *ngSwitchDefault>This is the default</span>
</div>
- *ngFor="let item of 表达式"
1.迭代表达式返回的结果展现内容，这是个微模板指令。
2.它还自带一些模板变量，比如index、odd、even、first、last。
3.应对数据变更引起的刷新性能问题可以使用trackBy追踪它。
<tr *ngFor="let item of getProducts()">
<td>{{item.name}}</td>
<td>{{item.category}}</td>
<td>{{item.price}}</td>
</tr>
- [ngTemplateOutlet]="myTempl"
重复一块内容
<template #titleTemplate>
<h4 class="p-a-1 bg-success">Repeated Content</h4>
</template>
<template [ngTemplateOutlet]="titleTemplate"></template>
- <ng-container>
不影响DOM的容器，也就是说实际渲染时这块会被丢弃，常常在里面使用结构性指令
自定义指令
通常是利用NG的core库里的Directive, ElementRef, HostListener,Input等符号实现
- 创建属性指令
步骤：
1.使用Directive声明一个指令
2.用ElementRef间接操作DOM
3.用HostListener监听DOM事件
4.使用Input自定义属性
- 创建结构指令
1.使用Directive声明一个指令
2.使用ngOnChanges钩子和SimpleChange检测属性变更并更新DOM结构
3.使用TemplateRef和ViewContainerRef管理DOM元素
4.使用$implicit隐式变量提供额外的上下文数据，实现模板输入变量
5.和迭代有关的还要引入IterableDiffer, IterableDiffers,ChangeDetectorRef, CollectionChangeRecord, ViewRef
- 创建组件
1.使用Component声明一个组件
2.使用ViewChildren装饰器获取模板中的元素
3.组件间都是互相隔离的，默认影子DOM模式
4.组件充当了“控制器 (controller) ”和“视图模型 (view model) ”的角色
总结
属性形指令免去了我们对DOM的style或者classList进行操作、结构指令免去了在js里createElement、appendElement等创建删除DOM节点等操作，组件
网友评论