从另一个角度组件保存相关数据时刷新角度组件

Question

我正在研究 MEAN 堆栈和 Angular，并在一个名为 itemListDetailsComponent（在 .ts 文件中）的 Angular 组件中使用以下方法：

onStatusUpdateClick() {

    this.activatedRoute.queryParams.subscribe((params: any) => {
        console.log('queryParams', params['itemId']);
        this.itemsUpdateService.updateItemStatus(
          params['itemId'],
          this.activatedRoute.data).subscribe(data => {
            this.itemsUpdateService.statusChanged.emit("Status Changed");
        }, error => {super.handleError(error, (err) => {console.log(err)})});            
    });

}

此外，还有另一个角度组件 (itemsSideListComponent)，它显示所有项目及其状态的列表。 现在，一旦 itemsListDetailComponent 保存并更新了所选项目的状态，我需要刷新 itemsSideListComponent 中显示的项目列表。

任何信息，我怎样才能在 itemListDetailsComponent 中的选定项目的数据后刷新 可见项目 列表的 itemsSideListComponent strong> 已保存/更新。

请帮忙，因为我对 Angular 完全陌生。

Answer 1

您可以使用事件发射器服务。

这里是文档https://angular.io/api/core/EventEmitter

当您完成 1 个组件中的工作时，会发出一个带有特定 id 的事件。并将该事件监听（订阅）到您想要的组件。在那里，您还可以将数据传递给该监听组件。

Answer 2

您的itemListDetailsComponent 必须声明一个在保存/更新项目时触发的输出事件。

export class itemListDetailsComponent implements OnInit {

  @Output() onSaveOrUpdate = new EventEmitter<Item>();

  onSave(item: any) {
    // save and emit an event.
    this.onSaveOrUpdate.emit(item);
  }

  onUpdate(item: any) {
    // update and emit an event.
    this.onSaveOrUpdate.emit(item);
  }
}

我的回答是基于父组件（itemListDetailsComponent 和itemsSideListComponent 所在的组件）是“编排”数据的假设，并且您的两个组件只是负责显示它。

ParentComponent.html

<item-list-detail (onSaveOrUpdate)="doRefreshList($event)"></item-list-detail>
<item-side-list [listToDisplay]="list"></item-side-list>

这意味着itemsSideListComponent 将要显示的数据作为输入。所以：

export class itemListDetailsComponent {

    @Input()
    listToDisplay: any[];

}

ParentComponent.ts

list: Item[]

doRefreshList(item: any) {

// Make a server call or add item to list...
this.list.push(item);
}

您可能需要根据您的列表是否不可变进行更改检测。