在 Angular 9 中，如何在父组件通过 Observable 加载数据后重新加载子组件？答案

【问题标题】：In Angular 9, how do I get a child component to reload after the parent has loaded data through an Observable?在 Angular 9 中，如何在父组件通过 Observable 加载数据后重新加载子组件？
【发布时间】：2021-01-19 17:15:42
【问题描述】：

在我的 Angular 9 应用程序中，我想将一些数据从父组件传递到子组件。父级通过可观察对象加载该数据。下面是父项的样子...

<div>
    <h3 align="center">Hot Items</h3>
    <app-items [items]="items" ></app-items>
</div>

然后在 ts 文件中，我有这个

export class HotComponent implements OnInit {

  items: Item[] = [];

  constructor(
    private apiService: ApiService
  ) { }

  ngOnInit(): void {
    this.apiService.getHotItems().subscribe((result: ResultSet) => {
      this.items = result.hot_items;
    });
  }

但是我注意到当 observable 加载数据时，它没有显示在子组件中。我想也许我把它错误地传递给了孩子？下面是子组件的ts文件...

export class ItemsComponent implements OnInit {

  dataSource: MatTableDataSource<Item>;
  displayedColumns: string[] = ['title', 'notes'];
  @Input('items') items: Item[] = [];

  constructor() { }

  ngOnInit(): void {
    this.dataSource = new MatTableDataSource(this.items);
  }

子组件模板如下

<mat-table #table [dataSource]="dataSource">
    <ng-container matColumnDef="title">
    ...

父组件加载数据时如何让子组件重新加载？

【问题讨论】：

您实际上只在 ngOninit 中设置了一次数据。尝试在 ngOnChanges 中执行此操作？
不管怎样，让父母空着这样：@Input() items: Item[] = [];

标签： angular observable parent-child angular9

【解决方案1】：

一种方法是替换

ngOnInit(): void {
this.dataSource = new MatTableDataSource(this.items);
}

与

ngOnChanges(changes): void {
this.dataSource = new MatTableDataSource(this.items);
}

正如@MikeOne 在他的评论中建议的那样

【讨论】：

【解决方案2】：

这是您正确的做法，但有一件事是，变量引用没有改变，因此子组件中 @Input 变量中的值。

尝试使用 Observable 来实现，如下所示

在视图中：

  <app-items [items]="items$ | async" ></app-items>

在模板中：

 ...

 ngOnInit() {
    this.items$ = this.apiService.getHotItems();
 }

 ...

更多信息请参考original answer。

编码愉快.. :)

【讨论】：

您好，感谢您的回答。与 cmets 中建议的那样实现 onChanges 接口相比，执行这种“|异步”方法有什么优势吗？
也许我理解错了，但是 HotComponent 中的变量引用实际上正在改变 this.items 被设置为可观察对象中的一个新数组。问题可能仍然是 dataSource 仅在子组件的 init 上设置，并且对项目的任何更改都将被忽略。这个解决方案有效吗？ @satish 与 observables 一起工作很棒。我强烈建议学习如何使用它们。
@satish 是的，有了async，我们不需要担心发射值的变化。它将动态更新，与 ngOnChanges 一样，当该组件发生任何输入绑定属性更改时，值将多次分配给数据源。