angular2系列教程（五）Structural directives、再谈组件生命周期

今天，我们要讲的是structural directives和组件生命周期这两个知识点。structural directives顾名思义就是改变dom结构的指令。著名的内建结构指令有 ngIf, ngSwitch and ngFor。

例子

例子是我自己改写的，编写一个structural directives，然后通过这个指令实例化和注销组件，在此同时监视组件生命周期。

源代码

UnlessDirective

这个指令是官网示例中的指令。

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提供了多种视图容器的方法。

更详细的介绍：

• TemplateRef
• 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')}
}

这段代码我们做了这些事：

1. 渲染一个span一个button
2. 设置成员变量name,@input代表从parent输入
3. 设置成员函数doSomething，打印一个信息，执行一个异步操作setTimeout
4. 继承接口，设置所有的生命周期钩子，并打印信息

我们将使用这个组件，来监视组件生命周期。

使用指令控制组件

我们将我们的组件渲染出来，并用我们编写的结构指令“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));    

这段代码我们干了这些事：

1. 注入组件和指令directives:[UnlessDirective,Lifecycle]
2. 渲染一个button控制成员变量condition的正负
3. 渲染我们的组件lifecycle，并使用指令控制它的实例化和注销<lifecycle *myUnless="condition" name="lewis"></lifecycle>
4. 最后启动这个app组件bootstrap(App, []) .catch(err => console.error(err));

开始测试

刷新页面：

执行了一次Onchanges、onInit、AfterContentInit、AfterViewInit，执行了五次AfterContentChecked和AfterViewChecked，

1. onInit是在组件第一次ngOnChanges时执行
2. OnChanges在input和output绑定的值变化时候;我们可以看到打印了变化的值。可以替代ng1中的$watch;
3. AfterContentInit、AfterViewInit分别代表在组件内容和视图初始化后执行。
4. AfterContentChecked和AfterViewChecked是在组件内容和视图检查完后执行。

这里没有DoCheck，因为接口没有证实。

点击Set 'condition' toTrue按钮，页面上的组件被注销

console打印：

点击Set 'condition' to False按钮，页面上的组件重新被实例化：

console打印：

打印了一次Onchanges、onInit、AfterContentInit、AfterViewInit、AfterContentChecked和AfterViewChecked，说明组件实例化，只需要触发一轮初始化和变化检查。与刷新页面的五次对比，我们可以知道多余的“变化检查”，可能来源于angualr的启动。

点击click and watch the lifecycle按钮，一秒后页面上的name变为susan：

console打印

先打印一次AfterContentChecked和AfterViewChecked，一秒后又打印两次。OnChanges没有触发。

结论和收获

1. TemplateRef, ViewContainerRef这两个服务可以帮助我们实现结构指令的编写
2. 结构指令可以完全注销组件，节约性能消耗
3. 组件实例化，只需要触发一轮初始化和“变化检查”
4. angualr的启动会触发多次“变化检查”
5. 我们可以继承OnChanges接口，来实现类似ng1中的$watch功能，获取变化前后的值，但是只能监视@input装饰的变量
6. ng2使用zone，将window对象上常见的异步方法（setTimeout等），都打上了“猴子补丁”，使其可以直接更新视图，我们再也不用在异步中写ng1中的$apply了
7. 我们可以使用setTimeout(()=>{},0)，在浏览器的一轮“event loop”后来触发ng2的“变化检查”
8. 我们触发类的成员函数（doSomething）时，也会导致ng2的“变化检查”

 

教程源代码及目录

如果您觉得本博客教程帮到了您，就赏颗星吧！

https://github.com/lewis617/angular2-tutorial