AfterViewInit和AfterViewChecked
定义:整个视图组装完毕时调用
注意:
AfterViewInit
在AfterViewChecked
之前调用- 子组件的View钩子(包括
AfterViewInit
和AfterViewChecked
)调用完毕,父组件的View钩子才调用 - View钩子禁止改变视图中绑定的数据值,需放入另一个js周期中,如
setTimeout
排序:在Content钩子之后调用
demo:
app.component.html
<app-afterview #greet></app-afterview>
<app-afterview #greet2></app-afterview>
app.component.ts
export class AppComponent implements AfterViewInit,AfterViewChecked {
ngAfterViewInit() {
console.log("父组件视图初始化完成");
}
ngAfterViewChecked():void{
console.log("父组件视图变更检测完毕");
}
}
Afterview.component.ts
export class AfterviewComponent implements OnInit {
constructor() { }
ngOnInit() {
}
ngAfterViewInit() {
console.log("子组件视图初始化完成");
}
ngAfterViewChecked():void{
console.log("子组件视图变更检测完毕");
}
}
运行效果:
1.在父组件的html中写了两次子组件标签,所以,子组件视图初始化和变更检测进行了两次
2.子组件的初始化和变更检测在父组件之前
遵循单向数据流规则
当,在View钩子中改变视图中绑定的数据
Afterview.component.ts
export class AfterviewComponent implements OnInit {
public age:number = 5;
constructor() { }
ngOnInit() {
}
greeting(name:string){
console.log('hello,'+name);
}
ngAfterViewInit() {
console.log("子组件视图初始化完成");
this.age = 10;
}
ngAfterViewChecked():void{
console.log("子组件视图变更检测完毕");
}
}
Afterview.component.html
<p>
afterview works!
{{age}}
</p>
运行图:
因为View钩子是在整个视图组装完毕后才调用的,所以理论上不阔以改变视图中绑定的数据值
但可以将其放入另一个js运行周期中
afterview.component.ts
export class AfterviewComponent implements OnInit {
public age:number = 5;
constructor() { }
ngOnInit() {
}
greeting(name:string){
console.log('hello,'+name);
}
ngAfterViewInit() {
console.log("子组件视图初始化完成");
setTimeout(()=>{
this.age = 10;
},0)
}
ngAfterViewChecked():void{
console.log("子组件视图变更检测完毕");
}
}