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

Posted 2023-03-13

【中文标题】从另一个角度组件保存相关数据时刷新角度组件

【英文标题】：Refresh angular component when related data is saved from another angular component

【发布时间】：2017-12-27 02:12:33

【问题描述】：

我正在研究 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 完全陌生。

【问题讨论】：

投反对票的人能否评论一下为什么投反对票？

检查组件的属性 ?@Output()。在 itemListDetailsComponent 中的选定项目被保存/更新后使用它。

@RadouaneROUFID，你能详细说明一下输出关键字吗？我应该把它作为属性放在保存方法上还是放在'itemListDetailsComponent'的组件类上？

【参考方案1】：

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

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

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

【参考方案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);

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

【讨论】：

@Input() 是否应该在 itemsSideListComponent 列表变量上。另外，我在 itemListDetailsComponent.html 中调用 OnSaveOrUpdate() 方法，并且 listToDisplay 绑定在 itemsSideListComponent.html 中；而不是 ParentComponent.html。没有从 ParentComponent.html 调用任何方法。您可以更新答案吗？

这取决于您的页面结构。您只有两个组件，而 itemsSideListComponent 在 itemListDetailsComponent 内？请给我们你的html代码