本文介绍了浅谈angular2 组件的生命周期钩子,分享给大家,具体如下:
按照生命周期执行的先后顺序,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 |
指令和组件 |
生命周期顺序简写
在Angular通过构造函数创建组件/指令时,它调用这些生命周期钩子方法的顺序是:
除此之外,一些组件还提供了自己的生命周期钩子。例如router有routerOnActivate。
测试生命周期顺序的代码
import {Component} from '@angular/core'; import {bootstrap} from '@angular/platform-browser-dynamic'; @Component({ selector: 'panel', inputs: ['title', 'caption'], template: '<ng-content></ng-content>' }) class Panel { // 组件输入属性值发生改变(首次调用一定会发生在 ngOnInit之前。) ngOnChanges(changes) { console.log('On changes', changes); } // 组件初始化完成(在第一轮 ngOnChanges 完成之后调用。 ( 译注:也就是说当每个输入属性的值都被触发了一次 ngOnChanges 之后才会调用 ngOnInit ,此时所有输入属性都已经有了正确的初始绑定值 )) ngOnInit() { console.log('Initialized'); console.warn('OnChanges和DoCheck钩子不要同时出现,互斥!。本例仅供学习'); } // 脏值检测器被调用后调用 ngDoCheck() { console.log('Do check'); } // 组件销毁之前 ngOnDestroy() { console.log('Destroy'); } // 组件-内容-初始化完成 PS:指的是ContentChild或者Contentchildren ngAfterContentInit() { console.log('After content init'); } // 组件内容脏检查完成 ngAfterContentChecked() { console.log('After content checked'); } // 组件视图初始化完成 PS:指的是ViewChild或者ViewChildren ngAfterViewInit() { console.log('After view init'); } // 组件视图脏检查完成之后 ngAfterViewChecked() { console.log('After view checked'); } } @Component({ selector: 'app', template: ` <button (click)="toggle()">Toggle</button> <div *ngIf="counter % 2 == 0"> <panel caption="Sample caption" title="Sample">Hello world!</panel> </div> `, directives: [Panel] }) class App { counter: number = 0; toggle() { this.counter += 1; } } bootstrap(App);
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
网站题目:浅谈angular2组件的生命周期钩子-创新互联
分享路径:https://www.cdcxhl.com/article48/docdhp.html
成都网站建设公司_创新互联,为您提供建站公司、定制开发、做网站、网站收录、网站策划、网站导航
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联