Angular跨页面组件传递对象返回undefined，无法展示内容的问题

看起来你遇到的核心问题有两个：服务实例不共享，以及Observable的使用方式无法正确传递实时数据。咱们一步步来解决：

1. 确保服务是单例（数据能跨组件共享） #

首先检查你的服务是否是全局单例。如果你的服务是在组件的providers数组里声明的，那么列表组件和详情组件会各自创建一个服务实例——这就导致你在列表组件设置的movie，在详情组件的服务实例里根本不存在，自然拿到undefined。

解决方法：在服务类上使用providedIn: 'root'，确保整个应用只有一个服务实例：

import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';
import { IMovie } from './your-movie-interface-path';

@Injectable({
  providedIn: 'root' // 关键：让服务成为全局单例
})
export class CurrentMovieService {
  // 用BehaviorSubject存储当前电影，初始值可以设为null或者空对象
  private movieSubject = new BehaviorSubject<IMovie | null>(null);
  // 对外暴露Observable，防止外部直接修改Subject的值
  currentMovie$: Observable<IMovie | null> = this.movieSubject.asObservable();

  setCurrentMovie(movie: IMovie): void {
    this.movieSubject.next(movie); // 发送新值给所有订阅者
  }
}

2. 列表组件调用逻辑无需大改 #

列表组件的代码基本不用调整，只要确保注入的是同一个单例服务即可：

setCurrentMovie(movie: IMovie){ 
  this._currentMovieService.setCurrentMovie(movie); 
}

3. 修正详情组件的订阅逻辑 #

之前用of(this.movie)的问题在于，它只会发射一次当前值，而且如果服务实例不对，这个值就是undefined。现在改用BehaviorSubject的Observable，订阅后能实时拿到最新值：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { CurrentMovieService } from './your-service-path';
import { IMovie } from './your-movie-interface-path';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-movie-detail',
  templateUrl: './movie-detail.component.html'
})
export class MovieDetailComponent implements OnInit, OnDestroy {
  currentMovie: IMovie | null = null;
  private subscription!: Subscription;

  constructor(private _currentMovieService: CurrentMovieService) { }

  ngOnInit(): void {
    // 订阅currentMovie$，获取最新的电影数据
    this.subscription = this._currentMovieService.currentMovie$.subscribe(movie => {
      this.currentMovie = movie;
      console.log('当前电影:', movie); // 现在应该能正确打印了
    });
  }

  ngOnDestroy(): void {
    // 组件销毁时取消订阅，防止内存泄漏
    if (this.subscription) {
      this.subscription.unsubscribe();
    }
  }
}

4. HTML模板保持原样即可 #

你的详情组件HTML逻辑是没问题的，只要currentMovie有值，就会正常显示电影名称：

<div *ngIf="currentMovie"> {{currentMovie.MovieName}} </div>

额外检查点 #

• 确认IMovie接口的MovieName字段拼写正确，和后端返回的字段一致（注意大小写）。
• 确保从列表组件跳转到详情组件时，setCurrentMovie已经被正确调用（可以在列表组件里加个console.log确认）。

这样修改后，你点击列表元素时，服务会把电影数据发送给所有订阅者，详情组件就能实时收到并展示内容了。

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