Angular动态传递选中电影ID至服务的技术实现问询

下面分步骤实现动态传递电影ID并获取对应详情的功能：

1. 配置路由（app-routing.module.ts） #

首先配置带参数的路由，让详情页能接收电影ID参数：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeCardComponent } from './home-card/home-card.component';
import { InfoPageComponent } from './info-page/info-page.component';

const routes: Routes = [
  { path: '', component: HomeCardComponent },
  { path: 'movie/:id', component: InfoPageComponent } // 带id参数的详情页路由
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

2. 修改首页组件（HomeCardComponent） #

• 引入Router用于页面跳转
• 修正movieData初始值以适配TMDB返回的结构
• 添加跳转方法传递选中的电影ID

import { Component } from '@angular/core';
import { MovieDataService } from '../services/movie-data.service';
import { Router } from '@angular/router';

@Component({
  selector: 'home-card',
  templateUrl: './home-card.component.html',
  styleUrls: ['./home-card.component.css']
})
export class HomeCardComponent {

  movieData: any = { results: [] };
  constructor(
    private movieDataService: MovieDataService,
    private router: Router
  ) {}

  ngOnInit(): void {
    this.movieDataService.getData().subscribe((data) => {
      this.movieData = data;
      console.warn(data);
    })
  }

  goToMovieDetail(movieId: number): void {
    this.router.navigate(['/movie', movieId]);
  }
}

3. 修改首页HTML模板 #

在每个电影项上绑定点击事件，传递当前电影ID：

<div *ngFor="let movie of movieData.results" (click)="goToMovieDetail(movie.id)">
  <img [src]="'https://image.tmdb.org/t/p/w500' + movie.poster_path" alt="{{movie.title}}">
  <h3>{{movie.title}}</h3>
  <!-- 其他电影展示内容 -->
</div>

4. 修改详情页服务（DataService） #

将getMovie改为接收ID参数的方法，移除硬编码值：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class DataService {

  constructor(private http: HttpClient) { }

  getMovie(movieId: number) {
    return this.http.get(`https://api.themoviedb.org/3/movie/${movieId}?api_key=9279f87c4b7f1cb1474b6d7cd6958a6d&language=en-US`)
  }
}

5. 修改详情页组件（InfoPageComponent） #

• 引入ActivatedRoute获取路由参数
• 根据参数ID调用服务获取对应电影详情

import { Component } from '@angular/core';
import { DataService } from '../services/data.service';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'info-page',
  templateUrl: './info-page.component.html',
  styleUrls: ['./info-page.component.css']
})
export class InfoPageComponent {
  
  singleMovieData: any = {} ;
  
  constructor(
    private dataService: DataService,
    private route: ActivatedRoute
  ) {}

  ngOnInit(): void {
    this.route.paramMap.subscribe(params => {
      const movieId = Number(params.get('id'));
      if (movieId) {
        this.dataService.getMovie(movieId).subscribe((data) => {
          this.singleMovieData = data;
          console.warn(data);
        });
      }
    });
  }
}

额外提示 #

• 建议为电影数据定义专属接口（如Movie、MovieDetail）替换any类型，提升代码类型安全性
• 可添加加载状态提示和错误捕获逻辑，优化用户体验

内容的提问来源于stack exchange，提问作者r-r-i