Angular中检测输入变化触发子组件函数的技术问询

当然可以检测project对象的更新时机来触发子组件里的函数，不过你当前用ngDoCheck的方案其实不是最优解，咱们来拆解一下更合理的实现方式：

1. 优先使用@Input()的setter方法 #

这是Angular官方推荐的、最简洁的方式，当输入属性project的引用或值发生变化时，会自动触发setter逻辑，性能也更高效：

import { Input } from '@angular/core';

// 假设你的Project类型定义
interface Project {
  id: number;
  name: string;
  // 其他业务属性...
}

export class ChildComponent {
  private _project: Project | undefined;

  @Input() set project(newProject: Project) {
    // 浅对比：检测对象引用是否变化
    if (newProject !== this._project) {
      this._project = newProject;
      // 触发你需要执行的自定义函数
      this.handleProjectUpdate();
    }
  }

  get project(): Project | undefined {
    return this._project;
  }

  private handleProjectUpdate(): void {
    // 这里编写你要执行的业务逻辑
    console.log('Project对象已更新，执行自定义处理');
  }
}

如果project是引用不变但内部属性变化（比如父组件修改了project.name但没重新赋值新对象），浅对比就检测不到了。这时候可以用深对比，比如借助Lodash的isEqual方法，或者自己实现简单的深对比逻辑：

import { isEqual } from 'lodash';

// 在setter里替换对比逻辑
@Input() set project(newProject: Project) {
  if (!isEqual(newProject, this._project)) {
    this._project = newProject;
    this.handleProjectUpdate();
  }
}

2. 使用ngOnChanges生命周期钩子 #

如果你需要同时处理多个输入属性的变化，或者需要明确获取变化前后的值，可以用ngOnChanges：

import { Input, OnChanges, SimpleChanges } from '@angular/core';
import { isEqual } from 'lodash';

export class ChildComponent implements OnChanges {
  @Input() project!: Project;

  ngOnChanges(changes: SimpleChanges): void {
    // 检查project属性是否发生变化
    if (changes['project']) {
      const oldProject = changes['project'].previousValue;
      const newProject = changes['project'].currentValue;

      // 根据需求选择浅对比或深对比
      if (!isEqual(oldProject, newProject)) {
        this.handleProjectUpdate();
      }
    }
  }

  private handleProjectUpdate(): void {
    // 自定义业务逻辑
  }
}

关于你当前ngDoCheck方案的问题 #

ngDoCheck会在每次Angular变更检测周期都运行（频率非常高，比如父组件任何属性变化、用户交互等都会触发），这会带来不必要的性能开销。而且手动维护oldVal的方式很容易出错：如果project的引用不变但内部属性修改了，this.oldVal !== this.project的判断就会失效，无法检测到变化。所以这种方案不推荐用于检测输入属性的变化。

额外建议：使用Immutable数据结构 #

如果你的项目经常需要检测对象内部属性的变化，可以考虑使用Immutable数据结构（比如Immer库）。每次修改project时都返回一个新的对象引用，这样不管是setter还是ngOnChanges都能轻松检测到变化，同时避免深对比的性能损耗。

内容的提问来源于stack exchange，提问作者jovcem