Angular2 组件生命周期

博客介绍了组件的生命周期,从创建、变更到销毁,提供了生命周期钩子,可在关键节点与组件交互。还列出了按先后顺序执行的生命周期接口,并通过示例展示常用生命周期函数的用法,呈现了函数执行顺序及组件销毁时的调用情况。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1. 说明

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

2. 接口

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

名称时机接口范围
ngOnChanges当被绑定的输入属性的值发生变化时调用,首次调用一定会发生在 ngOnInit之前。OnChanges指令和组件
ngOnInit在第一轮 ngOnChanges 完成之后调用。 ( 译注:也就是说当每个输入属性的值都被触发了一次 ngOnChanges 之后才会调用 ngOnInit ,此时所有输入属性都已经有了正确的初始绑定值 )OnInit指令和组件
ngDoCheck在每个 Angular 变更检测周期中调用。DoCheck指令和组件
ngAfterContentInit当把内容投影进组件之后调用。AfterContentInit组件
ngAfterContentChecked每次完成被投影组件内容的变更检测之后调用。AfterContentChecked组件
ngAfterViewInit初始化完组件视图及其子视图之后调用。AfterViewInit组件
after initializing the component’s views and child views.
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
这里写图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值