如何通过单击电影图像来传输带有数据的MatDialog

Question

我正在尝试在Angular 9中构建电影SPA，该SPA使用TMDb api服务消耗数据。

我已经创建并使用了数据，但是当我试图将数据传输到另一个名为MoviePopupComponent的组件时，但我不知道如何执行此操作...

我曾想并尝试观看一些有关父母和孩子继承并使用@Input的视频，但我尝试实现它失败。

export class MovieItemComponent implements OnInit {
  constructor(public apiService: ApiService, public dialog: MatDialog,){}
  @Input() movie: Movie;
  ngOnInit(): void {
  }
  openModal(movie){
    this.movieObject = this.apiService.getMovieClicked(movie); // Receive the object
    const dialogConfig = new MatDialogConfig();
    dialogConfig.disableClose = false;
    dialogConfig.autoFocus = true;
    dialogConfig.width = '80%';
    dialogConfig.height = '90vh';
    this.dialog.open(MoviePopupComponent, dialogConfig);
    this.movieObject.title}}

Answer 1

对话框应该使用的数据是传递给它的配置的一部分。不知道我以前怎么想念它。数据的结构应使MoviePopupComponent可以使用。

openModal(movie) {
    const dialogConfig = new MatDialogConfig();
    dialogConfig.disableClose = false;
    dialogConfig.autoFocus = true;
    dialogConfig.width = '80%';
    dialogConfig.height = '90vh';
    dialogConfig.data = {...movieObject};

    this.dialog.open(MoviePopupComponent, dialogConfig)
}