Angular 16中父组件修改model输入后，子组件如何响应变化？

问题核心在于：model()创建的信号，其.subscribe()方法仅监听通过.set()/.update()触发的内部变更，父组件通过输入绑定传递的外部值更新不会触发该订阅。要同时响应内部修改和父组件的外部更新，需要用Angular的effect函数来追踪信号值的变化。

修改子组件代码如下：

import { model, effect } from '@angular/core';

export class ChildrenComponent {
  myObjModel = model<MyObj>();

  constructor() {
    // 使用effect追踪model值的所有变化（内部set或父组件输入更新）
    effect(() => {
      const currentValue = this.myObjModel();
      this.doThings(currentValue);
    });
  }

  onMyModelChange(event: MyObj) {
    this.myObjModel.set(event);
    // 这里无需重复调用doThings，effect会自动触发
  }

  doThings(event: MyObj) {
    console.log("I changed value in: ", event);  
  }
}

原理说明 #

• effect()是Angular信号系统的核心API，它会自动追踪内部读取的所有信号值，当任何被追踪的信号值发生变化时——不管是内部通过.set()修改，还是父组件更新输入导致的信号值同步——effect都会重新执行。
• 原本的.subscribe()仅监听信号的内部变更事件，父组件更新输入属于外部同步信号值的操作，不会触发这个订阅流。

额外注意事项 #

• 若父组件传递的是复杂对象，要确保更新时传递新的对象引用（而非修改原对象属性），因为Angular输入绑定基于引用变更检测。如果必须修改原对象属性，可以在父组件用signal()包装myObj后传递值，或在子组件结合toObservable和distinctUntilChanged监听属性变化。
• 如果需要在effect中执行异步操作，记得注入NgZone确保操作在Angular变更检测周期内执行，避免视图不更新问题。

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