1、ngOnChanges:在ngOnInit之前, 当数据绑定输入属性的值发生变化时调用。 并且有一个SimpleChanges类型的参数,它其实是一个类型为SimpleChange,并且键值为属性名的数组:
2、ngOnInit:在第一次ngOnChanges之后。
3、ngDoCheck:每次Angular变化检测时。
4、ngAfterContentInit:在组件使用 ng-content 指令的情况下,Angular 会在将外部内容放到视图后用。它主要用于获取通过 @ContentChild 或 @ContentChildren 属性装饰器查询的内容视图元素。
5、ngAfterContentChecked:在组件使用 ng-content 指令的情况下,Angular 会在检测到外部内容的绑定或者每次变化的时候调用。
6、ngAfterViewInit:在组件相应的视图初始化之后调用,它主要用于获取通过 @ViewChild 或 @ViewChildren 属性装饰器查询的视图元素。
7、ngAfterViewChecked:在子组件视图和子视图检查之后。
8、ngOnDestroy:在Angular销毁组件/指令之前。
代码方式
import { Component,Input, OnInit, OnChanges,DoCheck,AfterContentInit, AfterContentChecked, AfterViewChecked,AfterViewInit, OnDestroy} from '@angular/core';
@Component({
selector: 'app-hook',
templateUrl: './hook.component.html',
styleUrls: ['./hook.component.css']
})
export class HookComponent implements OnInit, OnChanges,
AfterContentInit,DoCheck,
AfterContentChecked, AfterViewChecked,
AfterViewInit, OnDestroy {
@Input() data;
constructor() { }
ngOnChanges(changes) {
console.log('On changes', changes);
}
ngOnInit() {
}
// 脏值检测器被调用后调用
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');
}
}