Angular使用two-way binding时子组件setter被调用两次该如何解决？

问题根因 #

当前代码触发了双向绑定的循环更新逻辑：

• 父组件更新isShown值后，通过Input绑定触发子组件isShown的setter
• setter内部直接执行isShownChange.emit()将值回传父组件
• 父组件接收到事件后同步更新自身的isShown变量，即使值无变化，Angular变更检测仍会再次同步Input值到子组件，触发第二次setter调用

解决方案 #

推荐两种可行方案，按需选择：

方案1：setter中新增值变化判断（改动最小） #

在子组件的setter逻辑开头加判断，只有传入值和当前存储值不一致时才执行后续逻辑，从根源阻断重复触发：

@Input()
public set isShown(isShown: boolean) {
  // 值无变化直接退出，避免重复执行
  if (isShown === this._isShown) return;
  console.log('Entering setter component');
  this._isShown = isShown;
  this.isShownChange.emit(isShown);
}

该方案兼容现有写法，同时能覆盖父组件异步初始化变量的场景，即使父组件传入的初始值和子组件默认值一致，也不会触发多余逻辑。

方案2：拆分父子数据流（更符合Angular设计规范） #

双向绑定的Input和Output逻辑应该权责分离：Input只负责接收父组件传值，Output只负责子组件内部主动修改值时的通知，不要在Input的setter中回抛事件：

@Component({changeDetection: ChangeDetectionStrategy.OnPush})
export class TogglerComponent {

  public get isShown(): boolean {
    return this._isShown;
  }

  @Input()
  public set isShown(isShown: boolean) {
    console.log('Entering setter component');
    this._isShown = isShown;
    // 删除setter中的emit逻辑
  }

  @Output()
  public isShownChange: EventEmitter<boolean> = new EventEmitter();

  private _isShown: boolean = true;

  public onToggle() {
    // 内部修改直接改私有变量，避免触发setter
    this._isShown = !this._isShown;
    // 仅内部主动修改时才抛事件通知父组件
    this.isShownChange.emit(this._isShown);
  }
}

该方案从设计层面避免了循环数据流，不会出现重复调用问题，长期维护性更好。

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