Angular两个无关联组件传值，使用Subject订阅返回undefined如何解决

问题根因 #

1. 服务实例不唯一：你为ConexionDataService配置了providedIn: 'root'，默认是全应用共享的单例服务，但你在接收组件的providers数组中再次注册了该服务，导致Angular为接收组件单独生成了一个私有实例。发送组件调用的是全局单例服务发值，接收组件订阅的是自己的私有实例，自然收不到数据。
2. 普通Subject特性限制：普通Subject只会将订阅之后触发的next值推送给订阅者，如果你是先点击按钮发值、再跳转路由到接收组件，接收组件订阅时之前发的值已经丢失，即使实例匹配也收不到数据。

现有方案修复步骤 #

步骤1：删除重复的服务注册 #

删掉接收组件providers数组中的ConexionDataService，保证全应用使用同一个单例服务。

步骤2：修改服务使用BehaviorSubject #

BehaviorSubject会缓存最新的发送值，新订阅者也能拿到订阅前最后一次发送的值，适配你先发送值后订阅的场景：

import { Injectable } from "@angular/core";
import { Metodos } from "../models/metodos";
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ConexionDataService {
    // 替换为BehaviorSubject，传入初始值（可根据你的Metodos枚举调整默认值）
    private metodoBoton = new BehaviorSubject<Metodos | null>(null);
    // 只暴露只读的Observable给外部订阅，避免外部直接修改Subject
    public metodoBoton$ = this.metodoBoton.asObservable();
  
    // 封装发值方法
    setMetodo(metodo: Metodos) {
      this.metodoBoton.next(metodo);
    }
}

步骤3：修改发送方调用逻辑 #

enviarMetodo(metodo:Metodos) {
    this.conexionDataService.setMetodo(metodo);
}

步骤4：修改接收方订阅逻辑，新增销毁时取消订阅避免内存泄漏 #

import { Subscription } from 'rxjs';

export class 你的接收组件类 {
  private metodoSub?: Subscription;
  metodo?: Metodos;

  constructor(private conexionDataService: ConexionDataService) {}

  ngOnInit(): void {
    this.metodoSub = this.conexionDataService.metodoBoton$.subscribe(log => {
      // 过滤掉初始的null值
      if(log) {
        this.metodo = log;
        console.log(log);
      }
    })
  }

  ngOnDestroy(): void {
    // 组件销毁时取消订阅，避免内存泄漏
    this.metodoSub?.unsubscribe();
  }
}

更适配场景的可选方案：路由传参 #

你的场景是点击按钮跳转目标组件，完全可以用路由参数传递method值，不需要依赖服务，逻辑更简单：

1. 配置路由规则：

// app-routing.module.ts中修改目标组件的路由配置
{ path: 'mapa-posiciones/:method', component: 你的地图组件类名 }

2. 列表组件按钮点击时跳转路由带参数：

// 「查看当前位置」按钮触发
this.router.navigate(['/mapa-posiciones', 'current']);
// 「查看过去24小时位置」按钮触发
this.router.navigate(['/mapa-posiciones', '24h']);

3. 地图组件中直接取路由参数：

import { ActivatedRoute } from '@angular/router';

export class 你的地图组件类 {
  metodo?: string;
  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    // 两种取值方式二选一即可
    // 方式1：直接取当前参数值（适合组件不会复用、参数不会变化的场景）
    this.metodo = this.route.snapshot.paramMap.get('method');
    
    // 方式2：订阅参数变化（适合组件会复用、参数可能动态变化的场景）
    this.route.paramMap.subscribe(params => {
      this.metodo = params.get('method');
    })
  }
}

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