标签：
今天，我们要讲的是structural directives和组件生命周期这两个知识点。structural directives顾名思义就是改变dom结构的指令。著名的内建结构指令有 ngIf, ngSwitch and ngFor。
例子是我自己改写的，编写一个structural directives，然后通过这个指令实例化和注销组件，在此同时监视组件生命周期。
这个指令是官网示例中的指令。
src/unless.directive.ts
import {Directive, Input} from ‘angular2/core‘;
import {TemplateRef, ViewContainerRef} from ‘angular2/core‘;
@Directive({ selector: ‘[myUnless]‘ })
export class UnlessDirective {
constructor(
private _templateRef: TemplateRef,
private _viewContainer: ViewContainerRef
) { }
@Input() set myUnless(condition: boolean) {
if (!condition) {
this._viewContainer.createEmbeddedView(this._templateRef);
} else {
this._viewContainer.clear();
}
}
}
通过注入TemplateRef, ViewContainerRef这两个服务，来控制template的实例化和注销。TemplateRef可以让我们获取指令所在的元素的template，ViewContainerRef提供了多种视图容器的方法。
更详细的介绍：
接下来我们编写一个用于测试的组件。
src/lifecycle.ts
import {Component,Input} from ‘angular2/core‘;
import {bootstrap} from ‘angular2/platform/browser‘;
import {OnChanges, SimpleChange,OnInit,AfterContentInit,AfterContentChecked,AfterViewInit,AfterViewChecked,OnDestroy} from ‘angular2/core‘;
@Component({
selector: "lifecycle",
template: `
<div>
<span>{{name}}</span>
<button (click)="doSomething()">click and watch the lifecycle</button>
</div>
`
})
export class Lifecycle
implements OnChanges, OnInit,AfterContentInit,AfterContentChecked,AfterViewInit, AfterViewChecked, OnDestroy{
@Input()
name:string
doSomething(){
console.log(‘***********doSomething**********‘);
setTimeout(()=>{
console.log(‘***********setTimeout**********‘);
this.name=‘susan‘
},1000)
}
ngOnInit(){console.log(‘onInit‘);}
ngOnDestroy(){console.log(‘OnDestroy‘)}
ngOnChanges(changes: {[propertyName: string]: SimpleChange}){console.log(‘ngOnChanges‘,changes)}
ngAfterContentInit(){console.log(‘AfterContentInit‘)}
ngAfterContentChecked(){console.log(‘AfterContentChecked‘)}
ngAfterViewInit(){console.log(‘AfterViewInit‘)}
ngAfterViewChecked(){console.log(‘AfterViewChecked‘)}
}
这段代码我们做了这些事：
我们将使用这个组件，来监视组件生命周期。
我们将我们的组件渲染出来，并用我们编写的结构指令“myunless”去实例化和注销这个组件
src/app.ts
import {Component} from ‘angular2/core‘;
import {bootstrap} from ‘angular2/platform/browser‘;
import {UnlessDirective}from ‘./unless.directive‘;
import {Lifecycle} from ‘./lifecycle‘
@Component({
selector: "app",
directives:[UnlessDirective,Lifecycle],
template: `
<button
(click)="condition = !condition"
[style.background] = "condition ? ‘orangered‘: ‘lightgreen‘"
>
Set ‘condition‘ to {{condition ? ‘False‘: ‘True‘}}
</button>
<lifecycle *myUnless="condition" name="lewis"></lifecycle>
`
})
export class App {
constructor() {}
}
bootstrap(App, [])
.catch(err => console.error(err));
这段代码我们干了这些事：
执行了一次Onchanges、onInit、AfterContentInit、AfterViewInit，执行了五次AfterContentChecked和AfterViewChecked，
这里没有DoCheck，因为接口没有证实。
console打印：
console打印：
打印了一次Onchanges、onInit、AfterContentInit、AfterViewInit、AfterContentChecked和AfterViewChecked，说明组件实例化，只需要触发一轮初始化和变化检查。与刷新页面的五次对比，我们可以知道多余的“变化检查”，可能来源于angualr的启动。
console打印
先打印一次AfterContentChecked和AfterViewChecked，一秒后又打印两次。OnChanges没有触发。
如果您觉得本博客教程帮到了您，就赏颗星吧！
https://github.com/lewis617/angular2-tutorial
angular2系列教程（五）Structural directives、再谈组件生命周期
标签：
原文地址：http://www.cnblogs.com/lewis617/p/5201631.html
