订阅基类中的行为主题时，Rxjs 订阅不起作用答案

【问题标题】：Rxjs subscribe not working when subscribing to Behavior Subject in base class订阅基类中的行为主题时，Rxjs 订阅不起作用
【发布时间】：2019-01-03 10:14:58
【问题描述】：

我目前正在使用 Angular 7。

我正在尝试实现一个基本的 http 服务，这样我就可以处理每个错误并显示加载的 gif 完全一样。所以我有一个基础服务，我的所有服务都扩展了；一旦发出 http 请求，我就会更新页面正在加载的行为主题。我在app.component.ts 中订阅了这个BehaviorSubject，但它从未在这里触发。在网上看，每个人都建议我的基础 http 服务不是单例，而我的 app.component.ts 正在订阅基础服务的不同实例。

我在 SlackBlitz here 上创建了一个小例子。

当您单击“更改 showLoading”按钮时，我的订阅似乎在 BaseServiceService 类中工作正常，但从未在 app.component 中触发？

我做错了什么？

【问题讨论】：

您想要实现的目标很容易使用 http 拦截器完成。
我建议您不要从基础服务继承，而是在其他服务中使用/注入基础服务。这样，您就可以在所有其他服务中访问您的基础服务的功能，并且仍然只使用一个您可以在组件中订阅的基础服务实例。
@Davy 很好的建议，这是我最后采取的路线。虽然现在我有 2 个 http 拦截器（另一个是 jwt 令牌拦截器）。有 2 个 http 拦截器是不好的做法吗？
不。一点也不。让一个拦截器执行多项不相关的事情是不好的做法。

标签： angular rxjs

【解决方案1】：

与单例无关，但关于不同实例的建议是正确的，我将尝试逐步解释。

你在 app.component.ts 构造函数中注入的这两个实例（BaseServiceService、FileServiceService）是不同的并且是独立初始化的，这就是为什么 this.fileService.callBase();不会交互/触发 this.baseService.showLoading BehaviourSubject，如果您将 this.baseService.showLoading.subscribe(x => console.log('new val: ' + x)); 这一行更改为 this.fileService.showLoading.subscribe(x => console.log('new val: ' + x));，它将按预期工作，现在您只需从构造函数中删除 private baseService: BaseServiceService 注入，从 providers: [FileServiceService, BaseServiceService] 中删除 BaseServiceService

----已编辑----

我想我明白了你的意图，所以我修改了你的演示。这是链接https://stackblitz.com/edit/angular-r2wv24

【讨论】：

很好的解释，我明白，但我想使用基本服务，因为这是所有其他服务都将使用的。我不想订阅 app.component.ts 中每个服务的每个 showLoading 属性，只订阅一个基础服务。

【解决方案2】：

您的 FileService 类扩展了 BaseService 类，这意味着两个类都将具有属性 showLoading。

只有FileService 服务通过callBase() 方法调用，这意味着只有FileService 中的showLoading 属性才会收到任何更改的通知。

我在您的app.component.ts 中更改了这一行以订阅FileService 而不是BaseService，它按预期工作。

this.fileService.showLoading.subscribe(x => console.log('new val app: ' + x));

我假设您想要一种抽象服务来在更高级别定义您的showLoading？

【讨论】：

是的，我确实想要更高级别的抽象服务。我怎样才能在我目前的情况下实现这一点？
我想不扩展BaseService 将是第一步，然后让您的FileService 订阅您的BaseService 内部观察？有多种方法可以做你想做的事，但如果没有大局观，很难根据模拟示例提出解决方案......