Angular，如何将数据从一个组件传递到另一个组件？

Question

我正在尝试将数据从父组件传递到子组件。电影搜索组件使用服务功能来收集数据，然后处理数据，使其仅包含标题和 ID 信息。我想将它传递给详细信息组件，以便我可以使其可见/可点击。我得到的是这些要点而不是实际数据。

下面是执行搜索并将结果处理成对象的组件，如上面屏幕截图的控制台日志所示。

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { MovieResult } from '../movie-result';
import { MovieQueryService } from '../services/movie-query.service';
import { map } from 'rxjs';

@Component({
  selector: 'app-movie-search',
  templateUrl: './movie-search.component.html',
  styleUrls: ['./movie-search.component.css']
})
export class MovieSearchComponent {
  movies: any = [];
  

  constructor(private queryService: MovieQueryService){}

  search(query: string)
  {
    this.queryService.getData(query).subscribe((movies:any) => {
      this.processResults(movies.results) })
  }

  processResults(movies: any)
  {

  
    movies.forEach((element: any) => {
      this.movies.push([element.title, element.id])
      console.log(this.movies)});
 
  }
  

  ngOnInIt() : void
  {

  }
}

下面是应用组件的html文件 电影搜索.component.html

  <div id="search-component">
    <label for="search-box">Movie Search</label>
    <input  #searchBox id="search-box" (keyup.enter)="search(searchBox.value)" />

   
</div>

<app-movie-details [data]="movies"></app-movie-details>

电影搜索.component.html

<li *ngFor="let data of data">
    <p>{{data.title}}</p>
    <p>{{data.id}}</p>
</li>