angular - 如何更新孩子

Question

我有一个像这样引用子组件的组件

  cc: TheChildComponent;
  @ViewChild('theChildComponent') set details(content: TheChildComponent) {
           this.cc = content;
        };

TheChildComponent 是一个复杂的组件，具有多个 dom 元素和一组数据，这些数据通过 rest 调用异步更新。

每当我检测到 TheChildComponent 中的数据数组发生更改时，我都想更新我的变量 this.cc。

我不知道该怎么做，或者是否可能。

Answer 1

通常的方法是在子组件更改其状态时在子组件中发出事件。鉴于您无法访问子组件实现，您必须寻找更奇特的解决方案。

我会ngDoCheck结合@ViewChild.

@ViewChild(TheChildComponent) child: TheChildComponent;

ngDoCheck() {
  if (this.child && this.hasChanged(this.child.array))
    this.cc = this.child.array;
  }
}

private hasChanged(arr: any[]): boolean {
  // check if the child changed its state
}

请记住，这个生命周期钩子经常被调用，所以让你的逻辑尽可能的精简。

查看现场演示。