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装饰的指令，为什么还要细化结构型指令和属性型指令等。在后期的学习中如果有答案的话我会随时更新本结内容。