码迷,mamicode.com
首页 > 其他好文 > 详细

Angular2 组件生命周期

时间:2016-08-24 12:42:31      阅读:332      评论:0      收藏:0      [点我收藏+]

标签:

 

1. 说明

Angular每个组件都存在一个生命周期,从创建,变更到销毁。Angular提供组件生命周期钩子,把这些关键时刻暴露出来,赋予在这些关键结点和组件进行交互的能力。

2. 接口

按照生命周期执行的先后顺序,Angular生命周期接口如下所示

名称

时机

接口

范围

ngOnChanges

当被绑定的输入属性的值发生变化时调用,首次调用一定会发生在 ngOnInit之前。

OnChanges

指令和组件

ngOnInit

在第一轮 ngOnChanges 完成之后调用。 ( 译注:也就是说当每个输入属性的值都被触发了一次 ngOnChanges 之后才会调用 ngOnInit ,此时所有输入属性都已经有了正确的初始绑定值 )

OnInit

指令和组件

ngDoCheck

在每个 Angular 变更检测周期中调用。

DoCheck

指令和组件

ngAfterContentInit

当把内容投影进组件之后调用。

AfterContentInit

组件

ngAfterContentChecked

每次完成被投影组件内容的变更检测之后调用。

AfterContentChecked

组件

ngAfterViewInit

初始化完组件视图及其子视图之后调用。

after initializing the component‘s views and child views.

AfterViewInit

组件

ngAfterViewChecked

每次做完组件视图和子视图的变更检测之后调用。

AfterViewChecked

组件

ngOnDestroy

Angular 每次销毁指令 / 组件之前调用。

OnDestroy

指令和组件

 

3. 示例

我们用一个示例展示一些常用的生命周期函数的用法,主要包括ngOnChangesngOnInitngDoCheckngOnDestroy,实现的示例代码如下:

birthday组件中实现了对应的生命周期函数,并在App组件中调用

import { Component, Input, OnChanges, OnInit, DoCheck, OnDestroy } from ‘@angular/core‘;

 

@Component({

    moduleId: ‘birthday‘,

    selector: ‘birthday‘,

    template: `

        <h5>your birthday is {{birthday}}</h5>

    `,

})

export class BirthdayComponent implements OnChanges, OnInit, DoCheck, OnDestroy {

    @Input()

    birthday;

 

    ngOnChanges(changes) {

        console.log(‘ngOnChanges‘);

    }

 

    ngOnInit() {

        console.log(‘ngOnInit‘);

    }

 

    ngDoCheck() {

        console.log(‘ngDoCheck‘);

    }

 

    ngOnDestroy() {

        console.log(‘ngOnDestroy‘);

    }

}

 

@Component({

    moduleId: ‘app‘,

    selector: ‘app‘,

    template: `

        <birthday [birthday]="birthday"></birthday>

    `,

    directives: [BirthdayComponent]

})

export class AppComponent {

    birthday: Date = new Date(2012, 10, 10);

}

Chrome中运行,得到的结果如下,可以清楚的看到按照ngOnChangesngOnInitngDoCheck的顺序执行,当组件销毁时会调用ngOnDestroy

 技术分享

 

Angular2 组件生命周期

标签:

原文地址:http://www.cnblogs.com/SLchuck/p/5802308.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!