angular中的DoCheck

最新推荐文章于 2025-05-15 12:29:28 发布

原创最新推荐文章于 2025-05-15 12:29:28 发布 · 置顶 · 782 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#typescript #angular

Angular 专栏收录该内容

2 篇文章

订阅专栏

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

紧跟在每次执行变更检测时的 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;

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