Angular路由切换时组件内Subscription仅页面刷新才生效的问题

你观察到路由跳转时console.log('onInit')可以正常输出，说明Device1Component的初始化流程、订阅动作都正常执行，问题完全出在SocketService的事件流特性上：

• 你当前封装的createObserver返回的是基于socket事件的无缓存冷流——这类流的特性是，只有订阅完成之后新触发的事件，才会推送给订阅者；如果事件在订阅发起之前就已经推送完毕，后续新的订阅永远收不到历史已经推送过的事件值。
• 两种场景的触发逻辑差异：
  • 整页刷新时：应用全量重载，Socket实例重新建立连接，服务端在连接握手完成后会主动推送一次initial事件。只要你刷新时路由落在Device1Component，组件初始化时会在事件推送前完成订阅，因此订阅回调可以正常执行，输出Subbed2日志。
  • 路由跳转时：应用没有刷新，Socket连接早在首次启动时就已经建立完成，服务端第一次推送initial事件时，你当时还停留在DashboardComponent路由上，根本没有发起这次订阅。等你点击路由跳转到Device1Component、执行ngOnInit完成订阅时，这个initial事件早在应用启动阶段就已经推送结束，不会因为你后续的订阅动作就重新补发，因此订阅回调永远不会触发。
• 快速验证方式：路由跳转到Device1Component之后，手动通过服务端再推送一次initial事件，这时候你的订阅回调会正常触发输出日志，完全可以佐证上述判断。

方案1：将事件流改为带历史缓存的单例流 #

不再每次调用getInitialData()就新建一个裸的事件监听，而是给每个事件创建一个带最近1次值缓存的可观察流实例，新订阅者只要发起订阅，就能立刻拿到历史上最近一次推送的事件值。示例修改后的SocketService实现：

export class SocketService {
  // 预先创建带缓存的单例事件流
  private initialData$ = this.createObserver('initial').pipe(shareReplay(1));
  private updatedData$ = this.createObserver('updated').pipe(shareReplay(1));

  constructor(private socket: Socket) { }

  getInitialData() {
    return this.initialData$;
  }

  getUpdatedData() {
    return this.updatedData$;
  }

  private createObserver(event: string) {
    return this.socket.fromEvent(event);
  }
}

注意：shareReplay(1)的作用是将最近一次推送的事件值缓存1份，后续所有新的订阅者都会立刻收到这份缓存值，不会因为订阅时机晚而丢失历史数据。

方案2：订阅完成后主动拉取数据 #

在Device1Component完成事件订阅后，主动向Socket服务端发送一次拉取请求，要求服务端重新推送一次当前的初始化数据，不被动等待服务端的主动推送。

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