Angular2的指令

2017-07-31 本文已影响88人云峰yf

前言

指令也是NG的核心部分之一，它可以用来对模板内容进行逻辑控制。结合数据绑定使用，基本就告别了手动操作DOM的时代，转而进入了美好的数据驱动的前端高效开发时代。

应用

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节点等操作，组件

Angular2的指令

前言

分类

应用

自定义指令

总结

猜你喜欢

热点阅读