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

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(，它显示所有项目及其状态的列表。 现在，一旦项目列表详细信息组件保存并更新所选项目的状态，我需要刷新项目侧列表组件中显示的项目列表。

任何信息，一旦保存/更新了项目列表详细信息组件中所选项目的数据，我如何刷新可见项目列表中的项目侧列表组件。

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

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"，并且您的两个组件只是负责显示它。

父组件.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 的事件。并将该事件侦听(订阅(到所需的组件。在那里，您还可以将数据传递到该侦听组件。