Angular学习笔记(十八)周期钩子之View钩子

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

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

AfterViewInit和AfterViewChecked

定义:整个视图组装完毕时调用

注意:

  • AfterViewInitAfterViewChecked之前调用
  • 子组件的View钩子(包括AfterViewInitAfterViewChecked)调用完毕,父组件的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("子组件视图变更检测完毕");    
  }  
}
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值