如何让子组件知道输入已更改？

Question

我使用Angular 10，并且有一个ParentComponent和一个ChildComponent。 ChildComponent对父级成员有一个@Input。

由于承诺，需要一段时间才能生成父级成员。我稍后使用this.cd.detectChanges()通知孩子重画。

现在如何更新子组件的某些成员？这些更改是否有观察者或订户模式？正确的方法是什么？

Answer 1

您可以实施ngOnChanges生命周期方法，以在@Input绑定值更改时检测更改。

ngOnChanges(changes: SimpleChanges) {
    if(changes.input_var.currentValue != changes.input_var.previousValue) {
      /* write your code here */
    } 
  }

Answer 2

使用detectChanges管道提供Promise的结果，而不是使用async：

<app-my-child-component [myInput]="myPromise$ | async">

如果您的Promise返回了您希望显示的图像数组，我建议您采取以下措施：

<ng-container *ngIf="myPromise$ | async as images">
  <img *ngFor="let image of images" [src]="image"> 
</ng-container>

ng-container为您提供了*ngIf指令的钩子，并允许您创建images别名（用于处理Observable和Promises的Angular最佳实践）。然后，您可以使用*ngFor遍历返回的别名数组以显示图像。