Angular Child 组件没有立即更新

Question

我正在学习 Angular 6，我认为我做得对，但我面临 "problem-doubt"

我有一个 parent 和一个 Child:

我的 parent 正在使用输入绑定
一个按钮触发一个更新信息的函数
随后，parent 通过@ViewChild

一个Stackblitz 可以在这里找到

我的 parent 组件看起来像：

Html:

This is the parent
<child [data]="my_data"></child>
<button (click)="fireAll()">Fire All!</button>

打字稿：

export class AppComponent  {
  @ViewChild(ChildComponent) childComp: ChildComponent;
  my_data = 'Nothing yet';

  public fireAll(){
    this.my_data = "I want to show this info in console";
    this.childComp.writeToConsole();
    //setTimeout(()=>this.childComp.writeToConsole(), 500); //This works well
  }

}

Child:

export class ChildComponent  {
  @Input() data: string;

  writeToConsole(){
    console.log(this.data);
  }
}

问题是： 我第一次点击我的按钮时，我希望在控制台中看到 "I want to show this info in console"，而不是我收到 "Nothing yet"。但是如果我再次点击它，就达到了预期的结果。我想 parent 将数据传递给 child 之间存在延迟，因为如果我使用 setTimeout 稍等一下，一切正常。

我的问题：

将数据从 parent 发送到 child 并立即在 child 中使用的最佳方法是什么？
我做错了什么？

非常感谢您的帮助，谢谢

Answer 1

我已经更新了你的 stackblitz。第一次点击时，我先 'I want to show this info in console' 打印到控制台。

Example Stackblitz

Answer 2

实际上一切正常。您遇到的情况如下。

你按下按钮
你更新my_data
您调用了 child 的 writeToConsole 方法。
此时变化检测仍在评估所有组件
child还没有更新，所以你得到的还是旧数据
变化检测完成，新数据通过

在您的设置中，控制台日志总是比您预期的慢一步。您在更改检测可以完成其工作之前调用该方法。在您引入延迟 (setTimeout) 的那一刻，更改检测将在您调用该方法之前执行。这就是为什么它 'works' 在你眼里。

总而言之，一切正常。 parent 不应调用 child 的方法。它应该只向 child.

提供数据

如果您想尽快使用新值，您应该实施 OnChanges。它会在新数据进入组件时通知您。

ngOnChanges(): void {
  console.log('onChanges', this.data);
}

Angular Child 组件没有立即更新

Angular Child Component is not being updated inmediatly

components

interaction

inputbinding

viewchild

angular