Angular路由组件传值异常：非刷新路由无法获取数据

你当前使用的Subject属于冷Observable，它只会向订阅操作执行之后发送的数据流推送消息。应用启动时，home.component.ts先完成Ajax请求并调用next()发送了MetaCompany数据，但此时left-menu-admin.component.ts还未加载、未执行订阅操作；当你导航至/admin页面时，组件才初始化并订阅数据流，但之前的next()已经执行完毕，因此收不到历史数据。而刷新/admin页面时，home.component.ts会重新发起请求并发送数据，此时left-menu-admin.component.ts已经完成订阅，所以能正常接收数据。

将Subject替换为热Observable类型的BehaviorSubject或ReplaySubject，这两种类型会缓存历史数据，新订阅的观察者能获取到之前发送的消息。

1. 修改共享服务（interaction.service.ts） #

方案一：使用BehaviorSubject（推荐，需指定初始值） #

import { BehaviorSubject } from 'rxjs';

private globalMetaCompanySource = new BehaviorSubject<MetaCompany>(null); // 传入初始值，比如null或空对象
globalMetaCompany$ = this.globalMetaCompanySource.asObservable();

setGlobalMetaCompany(metaCompany: MetaCompany) {
  this.globalMetaCompanySource.next(metaCompany);
}

方案二：使用ReplaySubject（无需初始值，可指定缓存条数） #

import { ReplaySubject } from 'rxjs';

// 缓存最近1条历史数据
private globalMetaCompanySource = new ReplaySubject<MetaCompany>(1);
globalMetaCompany$ = this.globalMetaCompanySource.asObservable();

setGlobalMetaCompany(metaCompany: MetaCompany) {
  this.globalMetaCompanySource.next(metaCompany);
}

2. 优化接收组件的订阅逻辑（left-menu-admin.component.ts） #

建议在ngOnInit生命周期钩子中执行订阅（Angular推荐规范），并在组件销毁时取消订阅，避免内存泄漏：

import { OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';

export class LeftMenuAdminComponent implements OnInit, OnDestroy {
  companyName: string;
  avatarUri: string;
  private globalMetaCompanySubscription: Subscription;

  constructor(private interactionService: InteractionService) {}

  ngOnInit() {
    this.globalMetaCompanySubscription = this.interactionService.globalMetaCompany$.subscribe(
      (metaCompany: MetaCompany) => {
        if (metaCompany) { // 过滤初始值为null的情况
          this.companyName = metaCompany.companyName;
          this.avatarUri = metaCompany.avatarUri;
        }
      });
  }

  ngOnDestroy() {
    this.globalMetaCompanySubscription.unsubscribe();
  }
}

• 路由参数：适合传递少量简单数据（如ID），通过路由配置和ActivatedRoute获取
• LocalStorage/SessionStorage：适合存储需要持久化的数据，注意不要存放敏感信息
• 状态管理库（如NgRx）：适合复杂应用的全局状态统一管理
• 共享服务+BehaviorSubject/ReplaySubject：即当前优化的方案，适合中小型应用的全局数据传递

内容的提问来源于stack exchange，提问作者A. Gladkiy