javascript - 在 div angular 7 上传递值 onclick

Question

我有一个带有点击功能的div。我想在单击时将值传递给 Material 对话框。我知道如何在输入时使用 ngModal。我不知道该怎么做。有任何想法吗？谢谢。HTML:

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

这是我的 typescript :

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 组件中，您可以在构造函数中注入(inject) 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-