Angular父子组件共享数据是否需要双向绑定？新增评论后子组件未更新怎么办

Angular的变更检测机制对输入属性（@Input）的更新判定逻辑为：仅当输入属性的引用发生变化时，才会触发子组件的更新逻辑。你当前使用push()方法修改comments数组，属于在原数组引用基础上修改内容，数组的内存地址没有变化，因此Angular不会触发子组件的重新渲染，这就是你遇到数据不同步的核心原因。

你当前采用「父组件维护数据源、子组件接收输入+事件输出」的单向数据流思路是完全正确的，不需要使用双向绑定，双向绑定会让数据流向变得模糊，反而增加后续维护成本。

修改父组件的newComments方法，遵循不可变数据原则，每次新增评论后生成一个新的数组，替换原有数组引用即可：

newComments(comments:any) {
  // 展开原数组+新增评论，生成新数组替换旧引用
  this.comments = [...this.comments, ...comments];
}

这个方案不需要修改子组件任何代码，符合Angular最佳实践，性能损耗也最低。

如果因为业务逻辑限制不能替换数组引用，可以选择以下两种方案二选一：

• 给子组件的comments输入属性添加setter，主动监听数组内容变化：

  // 子组件代码
  private _comments: any[] = [];
  @Input() set comments(val: any[]) {
    this._comments = val;
    // 这里可以手动触发你需要的渲染逻辑，比如重新赋值列表数据源
  }
  get comments() {
    return this._comments;
  }
  

• 在子组件注入ChangeDetectorRef，新增评论后主动调用markForCheck()方法通知变更检测：
  这种方案需要父组件新增评论后额外给子组件发通知，实现成本比第一种方案高，不推荐优先使用。

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