Передайте значение при нажатии на div 7

Question

У меня есть div с функцией щелчка.Я хочу передать значение Диалогу материала по клику.Я знаю, как сделать с ngModal на входе.Я не знаю, как это сделать.Есть идеи?Благодарю.HTML:

<div class="opportunitiesTiles" (click)="openDialog('Designer')">

Вот мой машинописный текст:

export class OpportunitiesComponent implements OnInit {name: any;
constructor(public dialog: MatDialog) {}

 ngOnInit() {}

 openDialog(value): void {

const dialogRef = this.dialog.open(PopupDialog, {
});
dialogRef.afterClosed().subscribe(result => {
  console.log("The dialog was closed");
});}}

Это мой модал:

@Component({
selector: "popup-dialog",
templateUrl: "./popupDialog.component.html"
})
export class PopupDialog {
constructor(public dialogRef: MatDialogRef<PopupDialog>) {}

 onNoClick(): void {
this.dialogRef.close();
}}

Answer 1

Измените свою функцию openDialog и передайте значение в data:

openDialog(value): void {
      const dialogRef = this.dialog.open(PopupDialog, {
      data: { x: value },

    });

    dialogRef.afterClosed().subscribe(_result => {
      console.log('The dialog was closed');
    });
}

Теперь в вашем компоненте PopupDialog вы можете вставить MAT_DIALOG_DATA в конструктор для доступа к переданному значению, например так:

@Component({
    selector: "popup-dialog",
    templateUrl: "./popupDialog.component.html"
})
export class PopupDialog {
  x: any;

  constructor(
        public dialogRef: MatDialogRef<PopupDialog>,
        @Inject(MAT_DIALOG_DATA) public data: any
  ) {
    // here the received value is being assigned to class variable `x`
    this.x = data.x;
  }

    onNoClick(): void {
        this.dialogRef.close();
    }
}

Дополнительные параметры и подробные документы: https://material.angular.io/components/dialog/overview#sharing-data-with-the-dialog-component-