Angular 中的 Observable / Subject 失去订阅者答案

【问题标题】：Observable / Subject loosing subscribers in AngularAngular 中的 Observable / Subject 失去订阅者
【发布时间】：2019-02-06 07:19:09
【问题描述】：

我在我的类中使用一个静态变量来存储一个初始化的BehaviourSubject，这样我就可以提供一个默认值，同时从服务器加载用户的设置。

（下面放了一个精简的示例版本）

@Injectable
export class AppSettings {
   // Using a static to globalize our variable to get 
   // around different instances making lots of requests.
   static readonly currency: Subject<string> = new BehaviorSubject('USD');

   // Return a property for general consumption, but using
   // a global/static variable to ensure we only call once. 
   get currency(): Observable<string> { return AppSettings.currency; }


   loadFromServer():any {
      // Broadcast the currency once we get back 
      // our settings data from the server.
      this.someService.getSettings().subscribe(settings => {
         // this is called lastly, but AppSettings.currency.observers
         // seems to show as an empty array in the Inspector?? 
         AppSettings.currency.next(settings.currency);
      });
   }
}

当我稍后在我的代码中订阅它时，它会运行一次（因为它是 BehaviorSubject），但之后它不会触发。

export class myComponent {
   public currency: string;

   constructor(settings: AppSettings) {
       // Called once with the default 'USD'
       settings.currency.subscribe(currency => {
           // only gets here once, before loadFromServer
           console.log(currency);
           this.currency = currency;
       });

       // Load from the server and have our subscription
       // update our Currency property.
       settings.loadFromServer();
   }
}

loadFromServer() 完全按预期工作，AppSettings.currency.next(settings.currency) 行正在被调用，并且在第一个事件之后。然而有趣的是，此时AppSettings.currency.observables[] 是空的，而之前它是被填写的。

我的想法是我们最初是不同实例的问题，但我使用静态变量（甚至尝试过全局变量）来避免不同的实例。

这是当前的工作流程...

myComponent.constructor 订阅
订阅触发，默认为“USD”
服务器数据加载完毕，调用AppSettings.currency.next(settings.currency)
……然后……什么都没有……

我希望在第 4 部分中订阅第 1 部分的观察者会再次被解雇，但事实并非如此，这使我荣耀的观察者成为一个常数。 :(

我错过了什么吗？

【问题讨论】：

有错字吗？我看到了 setting.loadFromServer。不应该是设置。 ?
那是一个错字，但无论如何，这个例子是我的代码的一个总结版本，因为我刚刚写了一个简短的版本。

标签： javascript angular rxjs observable behaviorsubject

【解决方案1】：

好吧，我觉得很害羞……

发现问题是由于我的 import 语句在文件引用上有（错误的）文件后缀。所以，在我的myComponent 文件中......

import { AppSettings } from './settings.js';

虽然我在其他地方一直在使用（正确的）

import { AppSettings } from './settings';

这导致 WebPack 编译该类的两个版本，TypeScript 和（已编译的）Javascript 版本，从而创建了两个不同的实例。我设法在某个地方看到了AppSettings_1，它把我带到了兔子洞，终于把它送走了。

【讨论】：