Question

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

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 中显示的项目列表。< / p>

任何信息，如果 itemListDetailsComponent中所选项目的数据，我如何刷新 itemsSideListComponent 以获取可见项目的列表 strong>已保存/更新。

请帮忙，因为我对角度来说是全新的。

Answer 1

您的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存在的组件）是'orchestring'数据，而你的两个组件是负责显示它的juste。

<强> 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);
}

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

Answer 2

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

以下是文档https://angular.io/api/core/EventEmitter

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

当从另一个角度分量保存相关数据时刷新角度分量

2 个答案: