自己的表组件未正确处理服务调用答案

【问题标题】：Own table component is not handling service calls right自己的表组件未正确处理服务调用
【发布时间】：2021-12-16 23:51:52
【问题描述】：

目前我正在做一个项目，我需要一个可以在多个 ParentComponents 中实现为 ChildComponent 的表格组件。 ParentComponents可以为数据提供不同的服务。

给出的示例：对于 ComponentA，表格显示来自 ServiceA 的数据，对于 ComponentB，表格显示来自 ServiceB 的数据。

为此，我的 TableComponent 有一个名为 dataService 的 @Input() 变量：

_dataSubscription: Subscription;    
@Input() dataService: DataService; 
// DataService is an abstract class. ServiceA and ServiceB are implenting this class.

在 ngOnInit() 中我订阅了 dataService：

this._dataSubscription = this.dataService.getData().subscribe(
    (response) => {
      console.log(response)
    }
  );

此外，每当用户在 ParentComponents 之间切换时，我都会取消订阅 dataService：

  ngOnDestroy(): void {
     this._dataSubscription.unsubscribe()
  }

在 ParentComponentA 中，第一个服务是这样注入的：

constructor(public serviceA: ServiceA){}

它被传递到 .html 中的表中：

<app-table [dataService]="serviceA" #table></app-table>

（我对 ParentComponentB 做同样的事情，但我没有使用“serviceA：ServiceA”，而是使用：“serviceB：ServiceB”）

我知道它看起来不太好，但效果很好。唯一的问题是，每当用户从 ParentComponentA 切换到 ParentComponentB 时，都会调用两个 .getData() 方法，并且 console.log 会打印两个响应。当数据量越来越大时，这可能会成为问题。有没有办法解决这个问题？

我认为在 ngOnDestroy 中取消订阅是有效的，但它没有效果 - 仍然 console.log 打印两个调用的结果

提前致谢

【问题讨论】：

getData() 将在组件初始化后立即被调用。当您说您正在从ParentA 切换到ParentB 时。两者都被初始化。您是否期望您的组件切换比服务调用更快？如果是这样，您的 onDestroy 应该可以完成这项工作。
为什么不直接把数据交给表格组件。在那种情况下，你不会有这个问题
从 ParentA 切换到 ParentB 我的意思是我有两条路线 - 一条是“/parentA”，另一条是“/parentB”。用户可以通过始终显示的左侧菜单导航到另一条路线。我在 ngOnDestroy 中添加了一个 console.log。它总是显示在另一个组件的 getData() 调用结果之前 - 所以我假设取消订阅足够快来处理它，对吗？
@Batajus hmhm 好吧，是的，你是对的，这会让一切变得更容易 - 我不知道为什么我没有想到这一点。

标签： angular typescript angular-material-table

【解决方案1】：

为什么要将服务传递给孩子？

您也可以通过将服务传递给构造函数来简单地将服务注入孩子

在 ChildComponent 中做：

constructor(private serviceA: ServiceA){}

注意：您可以将单个服务注入多个组件

【讨论】：

是的，我可以那样做。这种方法的问题在于，这个 TableComponent 应该能够显示项目中所有服务的数据（20+）——所以我必须手动将每个服务注入到表构造函数中，这真的很辛苦。这是我的第一种方法，我正在寻找一种更好的方法来归档它