Angular中如何从Observable<Object>获取对象并跨组件传递？

1. 先改造你的服务，用BehaviorSubject维护共享数据 #

Angular里组件间共享动态数据，最常用的就是BehaviorSubject——它能保存当前的最新值，新组件订阅时也能直接拿到已有数据，完美适配你的场景。

修改你的服务类（比如MyService）：

import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';
import { Character } from './character.model'; // 替换成你实际的角色模型

@Injectable({ providedIn: 'root' })
export class MyService {
  // 初始化一个空的BehaviorSubject，存储选中的角色
  private selectedCharacter$ = new BehaviorSubject<Character | null>(null);
  // 对外暴露只读的Observable，避免外部直接修改内部数据
  public currentCharacter$ = this.selectedCharacter$.asObservable();

  // 设置选中角色的方法
  setSelectedCharacter(character: Character): void {
    this.selectedCharacter$.next(character);
  }

  // 你原有的getAllInfosById方法保持不变
  getAllInfosById(id: number): Observable<Character> {
    // 这里是你原本的API调用逻辑
  }
}

2. 在NameComponent中调用服务的set方法 #

把你已经获取到的角色对象传给服务，替换掉原来只打印控制台的代码：

// NameComponent中的代码
this.myService.getAllInfosById(this.getPersonnageIdByName(change))
  .subscribe(response => {
    console.log("All Details of Personnage", response);
    // 关键：把获取到的角色存入服务
    this.myService.setSelectedCharacter(response);
  });

3. 在StatisticsComponent中订阅并展示数据 #

在统计组件里订阅服务的currentCharacter$，拿到数据后在模板展示：

组件类代码：

import { Component, OnInit } from '@angular/core';
import { MyService } from '../my.service';
import { Character } from '../character.model';

@Component({
  selector: 'app-statistics',
  templateUrl: './statistics.component.html'
})
export class StatisticsComponent implements OnInit {
  myCharacter: Character | null = null;

  constructor(private myService: MyService) {}

  ngOnInit(): void {
    // 订阅角色变化，自动更新组件数据
    this.myService.currentCharacter$.subscribe(character => {
      this.myCharacter = character;
    });
  }
}

模板代码：

<!-- StatisticsComponent的模板 -->
<div *ngIf="myCharacter">
  <p>角色名称：{{ myCharacter.name }}</p>
  <!-- 其他你需要展示的角色属性 -->
</div>

关键说明 #

• 用BehaviorSubject而不是普通Subject，是因为它会保留最新值，即使StatisticsComponent是在角色选中之后才初始化的，也能直接拿到已选中的角色数据。
• 模板里加*ngIf="myCharacter"是为了避免角色未选中时，模板访问null的属性导致报错。

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