Question

要打开对话框：

  let dialogRef = dialog.open(UserProfileComponent, {
                    height: '400px',
                    width: '600px',
                 });

对话框：

         <h2 mat-dialog-title>Delete all</h2>
         <mat-dialog-content>Are you sure?</mat-dialog-content>
         <mat-dialog-actions>
           <button mat-button mat-dialog-close>No</button>               
           <button mat-button [mat-dialog-close]="true">Yes</button>
         </mat-dialog-actions>

现在，我想在显示标题之前对其进行更改，以使其与我的标题一起显示，而不是“全部删除”

Answer 1

您可以像这样使用来自控制器的绑定变量：

<h2 mat-dialog-title>{{dialogTitle}}</h2>

并且随时可以在控制器上进行更改。

Answer 2

您可以像这样通过open方法传递数据：

let dialogRef = dialog.open(UserProfileComponent, {
   height: '400px',
   width: '600px',
   data: { modalTitle: 'Your title' },
});

在模态组件中，您可以这样做获取对象数据

...
constructor(
   public dialogRef: MatDialogRef<UserProfileComponent>,
   @Inject(MAT_DIALOG_DATA) public data
) {}

ngOnInit(): void {
 console.log(this.data) // Here the data you passed through the method open
}
...

在您的模板中

<h2 mat-dialog-title>{{ data.modalTitle }}</h2>
<mat-dialog-content>Are you sure?</mat-dialog-content>
<mat-dialog-actions>
  <button mat-button mat-dialog-close>No</button>               
  <button mat-button [mat-dialog-close]="true">Yes</button>
</mat-dialog-actions>

此处更多信息Modal material doc

打开对话框时如何更改对话框标题

2 个答案: