如何跨Angular模块使用BehaviorSubject实现组件间数据共享？

当然可以跨模块使用BehaviorSubject实现组件间的数据共享！关键在于要保证你的CoreService是单例的——如果每个模块都创建一个服务实例，那两个组件的BehaviorSubject根本不是同一个，数据自然没法同步。

我来帮你修正代码并梳理正确的实现步骤：

1. 确保CoreService是根级单例 #

你当前的CoreService只加了@Injectable()装饰器，没有指定提供方式，这很容易导致多个实例。修改成下面这样：

@Injectable({
  providedIn: 'root' // 这行让Angular自动注册为根级单例
})
export class CoreService {
  private defaultCurrency = new BehaviorSubject<CurrencyModel>(null);
  DefaultCurrency = this.defaultCurrency.asObservable();
  
  changeDefaultCurrency(currency: CurrencyModel) {
    this.defaultCurrency.next(currency);
  }
}

这样不管哪个模块的组件注入CoreService，拿到的都是同一个实例，BehaviorSubject的数据流就能在跨模块组件间共享了。

如果你用的是Angular 6之前的老版本，可以把CoreService放在一个专门的CoreModule里，在CoreModule的providers数组里声明它，然后只在根模块(AppModule)里导入一次CoreModule，绝对不要在其他特性模块里重复导入。

2. 模块和组件的正确使用 #

• 你的CurrenciesModule和SharedModule不要在各自的providers里添加CoreService，只要在组件的构造函数里正常注入就行。
• 确保CurrencyModel在所有需要的地方正确导入，比如两个组件和CoreService文件里都要导入这个模型类。

3. 优化订阅（避免内存泄漏） #

组件销毁时记得取消订阅Observable，不然会造成内存泄漏。推荐用takeUntil操作符实现：
以CurrenciesComponent为例：

import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { OnDestroy } from '@angular/core';

export class CurrenciesComponent implements OnInit, OnDestroy {
  defaultCurrency: CurrencyModel;
  private destroy$ = new Subject<void>(); // 用于通知取消订阅

  constructor(private coreServ:CoreService) { }

  ngOnInit() {
    this.coreServ.DefaultCurrency
      .pipe(takeUntil(this.destroy$)) // 组件销毁时自动取消订阅
      .subscribe((val) => {
        this.defaultCurrency = val;
        console.log({ currNewDefault: this.defaultCurrency });
      });
  }

  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
  }

  selectCurrency(currency: CurrencyModel) {
    this.coreServ.changeDefaultCurrency(currency);
  }
}

ChooseCurrencyComponent也做同样的修改即可。

4. 可选：优化初始值 #

你的BehaviorSubject初始值是null，如果希望组件初始化时就有一个默认货币，可以传入一个CurrencyModel的实例，比如：

private defaultCurrency = new BehaviorSubject<CurrencyModel>({
  ID: 'USD',
  Name: 'US Dollar',
  Rates: []
});

这样修改后，不管是CurrenciesComponent还是ChooseCurrencyComponent，只要调用changeDefaultCurrency，另一个组件就能实时收到更新的数据啦！

内容的提问来源于stack exchange，提问作者Bellash