使用Subject在Angular非关联组件间传值失败：订阅无响应

核心问题原因 #

你遇到的问题本质是**Subject的特性限制**，以及点击事件与路由跳转的执行顺序冲突：

1. Subject只会将订阅之后发送的next()值推送给订阅者。当你点击按钮同时触发sendId()和路由跳转时，数据先通过Subject.next()发送，但此时接收组件（DashboardComponent）可能还未完成初始化订阅，导致错过这次数据推送。
2. 即使接收组件已初始化，若组件因路由跳转被重新创建，新实例订阅Subject时，也无法获取之前发送过的数据。

修复方案 #

1. 将Subject替换为BehaviorSubject #

BehaviorSubject会始终保存最新的推送值，新订阅者订阅时会立即收到这个最新值，完美适配路由跳转场景。修改共享服务代码：

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

@Injectable({
  providedIn: 'root'
})
export class SharedService {
  // 初始化时可设置默认值，比如null
  public movieId = new BehaviorSubject<any>(null);

  constructor() {}
   
  sendMovieId(data: any) {
    this.movieId.next(data);
  }
}

2. 优化点击事件与路由跳转的顺序（可选） #

点击事件和路由跳转的执行顺序可能导致数据推送先于组件订阅，你可以通过代码控制跳转时机，确保数据先发送完成：

// 发送组件中注入Router
import { Router } from '@angular/router';

constructor(private shared: SharedService, private router: Router){}

sendId(details: any) {
  this.shared.sendMovieId(details[1]);
  // 改用代码跳转，确保数据推送优先完成
  setTimeout(() => {
    this.router.navigate(['/movies']);
  }, 0);
}

同时修改发送组件HTML，移除routerLink：

<a (click)="sendId(data)" class="btn btn-primary" style="font-size: .4em;">See Connecting Movies</a>

3. 过滤初始默认值（可选） #

如果需要排除BehaviorSubject初始化时的默认值（比如我们设置的null），可以在订阅时添加过滤逻辑：

import { filter } from 'rxjs/operators';

ngOnInit(): void {
  this.shared.movieId.pipe(
    filter(data => data !== null) // 过滤初始null值
  ).subscribe(data => {
    console.log(data);
    this.movieData = data;
    this.logData();
  });
}

验证要点 #

• 确认共享服务为单例：你的服务已设置providedIn: 'root'，所有组件会注入同一实例，无需额外配置。
• 检查路由配置：确保/movies路由对应的组件确实是DashboardComponent，避免路由错误导致组件未加载。

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