angular2系统学习 - 结构型指令

1.简介

ng2中指令可分为三种：
- 组件
- 属性型指令
- 结构型指令

结构型指令通过添加和删除DOM元素来改变DOM的布局。

常用指令如：ngIf, ngSwitch, ngFor。

html5中使用template标签来防止隐藏的内容，而在ng2中，遇到template标签会将之替换成空的script标签。

2.ngSwitch

由于在教程中没有用过ngSwitch，而ngIf，ngFor用的很多，所以这里先插入一下ngSwitch的用法。

<div [ngSwitch]="state">
    <template [ngSwitchCase]="'state1'">State1</template>
    <template [ngSwitchCase]="'state2'">State2</template>
    <template [ngSwitchCase]="'state3'">State3</template>
    <template ngSwitchDefault>default</template>
</div>

3.(*)语法糖

关于这里的*效果，我们来看段代码

part1

<p *ngIf="condition">...</p>

part2

<template [ngIf]="condition">
    <p>...</p>
</template>

其实part1与part2的效果完全相同，其中差异不难体会。

4.自定义结构型指令

import { Directive, TemplateRef, ViewContainerRef} from '@angular/core';

@Directive({ selector: '[myUnless]' })
export class MyUnlessDirective {

  constructor(
    private templateRef: TemplateRef<any>,
    private viewContainer: ViewContainerRef
  ) { }

  @Input() set myUnless(condition: boolean) {
    if (!condition) {
        this.viewContainer.createEmbeddedView(this.templateRef);
    } else {
        this.viewContainer.clear();
    }
  }
}

• TemplateRef: 访问模板。
• ViewContainerRef: 渲染器。

5.小结

结构型指令没有讲太多。目前掌握的东西也很少。比如为什么虽然都是用@Directive装饰的指令，为什么还要细化结构型指令和属性型指令等。在后期的学习中如果有答案的话我会随时更新本结内容。