从父组件获取结果时，有没有比 EventEmitter 更好的方法？ [关闭]答案

【问题标题】：Is there a better way than EventEmitter when getting a result from parent component? [closed]从父组件获取结果时，有没有比 EventEmitter 更好的方法？ [关闭]
【发布时间】：2020-10-17 13:08:23
【问题描述】：

我使用 Material 表创建了一个可重用的组件，我想将所有共享逻辑保留在我的基础组件中（可重用）。但是，在服务器端分页时，我需要从自定义组件调用列表方法并获取其结果，以便在基础组件中进行处理。出于这个原因，我尝试使用EventEmitter，但没有设法返回结果。那么，有没有更好的方法，例如使用BehaviourSubject 调用并从自定义组件获取结果到基础组件？还是更聪明的方法？

base.component：

  ngAfterViewInit(): void {
  this.matSort.sortChange.subscribe(() => pageIndex = 0);

  merge(this.matSort.sortChange, this.matPaginator.page)
    .pipe(
      startWith({}),
      switchMap(() => {
        return this.emitToServer(pageIndex);
      }),
      map(data => {
        return data.items;
      })
    ).subscribe(data => this.data = data);
}


emitToServer(index) {
    this.getData.emit(index);
}

【问题讨论】：

您可以查看Subjects 作为从一个组件向另一个组件发出事件详细信息的一种方式。您可以将其包含在服务文件中，并将其作为 observable 订阅。所以这个Subject可以在多个监听变量变化的组件中复用。
@lanxion 感谢您的回复。在那种情况下，我认为似乎不可能轻松使用 EventEmitter。那么，我可以只获得一个通用主题以便用于所有列表类吗？还是我必须为每个列表创建一个新列表？另一方面，您知道有关服务器端排序，过滤和材料表分页的任何方法吗？
发出的pageIndex 是什么？ switchMap 这里有什么具体原因吗？它们用于从一个 observable 映射到另一个 observable，而不是执行像在这里发射这样的副作用。
@MichaelD 我将这种方法用于材料表分页。实际上我之前使用过一个实现，但是在将其转换为服务器端之后，我不得不进行一些类似的修改。 pageIndex 等并不重要。只需专注于如何从自定义组件调用方法到这个可重用组件并检索其结果

标签： angular rxjs angular-material eventemitter

【解决方案1】：

在您的父组件中，您可以注入一个服务来获取您的数据。

代替：

 return this.emitToServer(pageIndex);

做

  return this.tableDataService.fetch(pageIndex);

在你的父组件中：

@Component({
  providers: [MyUserTableDataService]
})
class MyParentComponent {
  ...
}

见：https://angular.io/guide/providers#limiting-provider-scope-with-components

【讨论】：

谢谢，但是使用一个通用方法来获取不同实体的数据怎么样？否则我必须将自定义方法移动到自定义组件。有什么想法吗？
你可以直接注入你的父组件作为你的服务。我是这样想的：@Component({ providers: [{provide: TableDataService, useExisting: MyParentComponent}]) class MyParentComponent { ... }
谢谢，我以另一种方式解决了这个问题，但也为您的帮助投了赞成票。