Question

我正在学习Angular 6，我想我做对了，但是我面临着“问题怀疑”

我有一个父母和一个孩子：

我的父母正在通过输入绑定与我的孩子分享信息
一个按钮触发一个用于更新信息的功能
父级立即通过@ViewChild调用子级功能

可以在这里找到Stackblitz

我的父组件看起来像：

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
  }

}

孩子：

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

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

问题是：：第一次单击按钮时，我希望在控制台中看到“我想在控制台中显示此信息”，而不是我收到“无”然而”。但是，如果我再次单击它，则可以达到预期的结果。我想在将父级传递数据传递给子级之间会有一个延迟，因为如果我使用setTimeout保持一点时间，那么一切都很好。

我的问题：

从父母向孩子发送数据并在孩子中直接使用数据的最佳方法是什么？
我在做什么错了？

非常感谢您的帮助，谢谢

Answer 1

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

您按下了按钮
您更新了my_data
您调用孩子的writeToConsole方法。
此时，变更检测仍在评估所有组件
该孩子尚未更新，因此您仍然可以获取旧数据
更改检测完成，新数据通过

在您的设置中，控制台日志将始终比您期望的落后一步。您在更改检测无法完成其工作之前就调用了该方法。引入延迟（setTimeout）时，将在调用该方法之前执行更改检测。这就是它在您眼中“起作用”的原因。

总体而言，一切正常。父级不应调用子级的方法。它应该只是将数据提供给孩子。

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

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

Answer 2

我已经更新了您的堆叠闪电战。第一次单击时，我先将“我想在控制台中显示此信息”打印到控制台。

Example Stackblitz

Angular Child Component没有立即更新

2 个答案: