Angular 5中跨模块Subject订阅失效问题求助

我之前在做Angular共享组件的时候也碰到过一模一样的Subject跨模块订阅问题，结合你给出的UtilityModule代码，咱们一步步排查常见的坑点：

1. 检查SpinnerService的注入实例唯一性 #

你的UtilityModule已经在providers里声明了SpinnerService，但要绝对避免其他使用该服务的模块在自己的providers数组里重复注册这个服务！如果其他模块也加了SpinnerService，Angular会为每个模块创建独立的服务实例，导致发布事件的实例和订阅的实例不是同一个，自然收不到消息。

解决方式：只在UtilityModule的providers里保留SpinnerService，其他需要用的模块只需要导入UtilityModule即可，不要重复声明。

2. 替换普通Subject为BehaviorSubject #

普通的Subject不会保存历史状态，如果组件在事件发布之后才订阅，就会错过之前的事件。换成BehaviorSubject就能解决这个问题，它会缓存最新的状态，新订阅的组件能立即拿到当前值。

修改SpinnerService的示例代码：

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable()
export class SpinnerService {
  // 初始化默认状态为false（隐藏）
  private spinnerState$ = new BehaviorSubject<boolean>(false);
  // 对外暴露只读的Observable
  public spinnerState = this.spinnerState$.asObservable();

  showSpinner(): void {
    this.spinnerState$.next(true);
  }

  hideSpinner(): void {
    this.spinnerState$.next(false);
  }
}

3. 规范组件的订阅与销毁逻辑 #

在SpinnerComponent里订阅服务的时候，一定要在组件销毁时取消订阅，避免内存泄漏，同时确保订阅时机正确（比如在ngOnInit里订阅，而不是构造函数）：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { SpinnerService } from './spinner.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-spinner',
  templateUrl: './spinner.component.html'
})
export class SpinnerComponent implements OnInit, OnDestroy {
  isLoading = false;
  private subscription: Subscription;

  constructor(private spinnerService: SpinnerService) { }

  ngOnInit(): void {
    this.subscription = this.spinnerService.spinnerState.subscribe(state => {
      this.isLoading = state;
    });
  }

  ngOnDestroy(): void {
    if (this.subscription) {
      this.subscription.unsubscribe();
    }
  }
}

4. 移除共享模块的Bootstrap配置 #

你的UtilityModule里配置了bootstrap: [ConfirmationDialogComponent]，这是错误的！只有根模块（AppModule）才应该配置bootstrap数组，共享模块不需要bootstrap任何组件，这会导致模块初始化异常，间接影响服务的实例化和事件传递。直接删掉这个bootstrap数组即可，ConfirmationDialogComponent应该通过弹窗服务（比如Angular Material的MatDialog）来调用，而不是bootstrap。

5. 验证服务实例是否唯一 #

可以在SpinnerService的构造函数里加一行日志，启动应用后看控制台是否只打印一次：

constructor() {
  console.log('SpinnerService instance created');
}

如果打印多次，说明肯定有模块重复注册了这个服务，回去检查各个功能模块的providers数组，把重复的SpinnerService删掉。

按照上面的步骤排查，应该能解决跨模块Subject订阅失效的问题！

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