Как открыть MatDialog с данными, передаваемыми по клику на изображении mov ie

Question

Я пытаюсь создать SPA из фильмов в Angular 9, который использует данные с использованием служб API TMDb.

Я уже создал и использую данные, но когда я пытаюсь передать данные другому компоненту под названием 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

Я решил свою проблему, вызвав функцию при нажатии на изображение mov ie. Открытие моего модала с использованием ANGULAR МАТЕРИАЛ МОДАЛЬ. Затем я создал метод для получения данных из API, используя:

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

После этого внутри моего MoviePopupComponent я реализовал метод инжекции MAT_DIALOG_DATA из Angular Material, и он позволяет мне манипулировать 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>

Answer 2

Данные, которые предполагается использовать в диалоге, являются частью конфигурации для передачи на него. Не знаю, как я пропустил это раньше. Данные должны быть структурированы таким образом, чтобы компонент 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)
}