angular中的DoCheck

置顶秦国

于 2021-03-25 19:37:47 发布

阅读量748

点赞数 1

分类专栏： Angular 文章标签： typescript angular

本文链接：https://blog.csdn.net/ActiveXObject/article/details/115216552

版权

Angular 专栏收录该内容

2 篇文章

订阅专栏

这篇博客探讨了在Angular中，ngDoCheck生命周期钩子如何在ngOnChanges和ngOnInit之后被调用来检测组件数据的任何变化，特别是在处理父组件传递的复杂对象时。当ngOnChanges无法检测到对象内部属性变化时，ngDoCheck成为识别这些变化的关键。通过在ngOnInit中保存初始状态，并在ngDoCheck中对比最新值，可以实现对细微变化的检测并执行相应操作。

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

紧跟在每次执行变更检测时的 ngOnChanges() 和首次执行变更检测时的 ngOnInit() 后调用。

ngDoCheck() 可以检测一切数据的变化，鼠标移动等操作也会执行 ngDoCheck()，只有很少的调用是由于数据修改而触发。

有时，父组件传入的是一个对象，ngOnChanges无法检测到对象内部数据的变化，此时就可以使用ngDoCheck来识别。可以在组件初始化时保存该变量，然后在ngDoCheck中与最新的值进行比较：

 ngOnInit(): void {
    // 保存需要检测变化的变量
    this.status = this.row?.status;
  }

  ngDoCheck(): void {
    if (this.row && this.row.status !== this.status) {
      this.status = this.row.status;

    // 识别到变化后进行其他操作
     ...
    }
  }