我正在建立一个网站，展示排名前20的科幻电影，主页组件通过一个服务使用GET请求来获取HTML模板中包含电影data. This movie data is rendered using ngFor *'的对象数组。
每个电影缩略图都有一个单击处理程序，该处理程序将路由到一个不同的页面，该页面将显示关于所选电影的更多信息--即描述、评级等。对于第二个页面，我使用了一个发出另一个GET请求的服务，其中查询包含所选电影的id作为参数。
呈现初始API电影数据的主页组件：

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

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

      movieData: any = {};
      constructor(private movieDataService: MovieDataService) {}

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

主页服务

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

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

       constructor(private http: HttpClient) { }
  
       getData() {
         return this.http.get('https://api.themoviedb.org/3/discover/movie?      api_key=9279f87c4b7f1cb1474b6d7cd6958a6d&language=en-US&with_genres=878');

       }
     }`

将呈现所选电影数据的单个电影页面

import { Component, Input, Output, EventEmitter } from '@angular/core';
    import { DataService } from '../services/data.service';

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

      ngOnInit(): void {
        this.DataService.getMovie().subscribe((data) => {
          this.singleMovieData = data;
          console.warn(data);
        })
       }
    }`

单个电影页面的服务

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

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

       constructor(private http: HttpClient) { }

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

  }

}

到目前为止，我只能将movieId硬编码到查询中，这是有效的。我对angular还很陌生，我正在尝试找到一种方法，在所选电影被点击后动态获取它的id，与服务共享它，并将该id作为查询的参数之一发出GET请求。