如何使用通过单击电影图像传输的数据打开 MatDialog

Question

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

我已经创建并使用了数据，但是当我尝试将数据传输到另一个名为MoviePopupComponent的组件时，但我不知道该怎么做......

我想并尝试观看一些关于父母和孩子 inheritance 并使用@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)
}

Answer 2

单击电影图像时，我通过触发 function 解决了我的问题。 使用 ANGULAR MATERIAL 模态打开我的模态。 然后我创建了一种方法来从 api 获取数据，使用：

let dialogRef = this.dialog.open(MoviePopUpComponent, data: { /*insert data here*/ } })

之后在我的 MoviePopupComponent 中，我通过来自 Angular 材料的 MAT_DIALOG_DATA 实现了一个注入方法，它允许我使用接收到的数据操作 HTML 模板：

public dialogRef: MatDialogRef<MoviePopupComponent>,
@Inject(MAT_DIALOG_DATA) public data: any

<div class="popup">
<div class="header">
    <h2 mat-dialog-title>
        {{ data.original_title }}
    </h2>
    <button class="mat-raised-button" (click)="close()">Close</button>
</div>
<mat-dialog-content>
    <div class="img-wrapper">
        <img 
            src="https://image.tmdb.org/t/p/w1920_and_h800_multi_faces/{{ data.backdrop_path}}" 
            alt="backdrop-img" 
            class="backdrop-img"
        >
    </div>
    <div class="content">
        <p> {{ data.release_date }} </p>
        <p> {{ data.overview }} </p>
    </div>
</mat-dialog-content>
<mat-dialog-content>
    <div class="recommendations">

    </div>
</mat-dialog-content>