Angular学习笔记（十八）周期钩子之View钩子

最新推荐文章于 2025-01-14 10:27:57 发布

原创最新推荐文章于 2025-01-14 10:27:57 发布 · 891 阅读

0 ·

CC 4.0 BY-SA版权

Angular学习系列专栏收录该内容

27 篇文章

订阅专栏

本文详细介绍了Angular的两个周期钩子AfterViewInit和AfterViewChecked。AfterViewInit在视图组装完毕时触发，而AfterViewChecked在每次变更检测后调用。需要注意的是，View钩子不应直接用于修改视图中的数据，应遵循单向数据流原则。文中通过示例代码演示了这两个钩子的使用，并展示了试图在View钩子中改变数据值的影响。

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

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("子组件视图变更检测完毕");    
  }  
}