Question

我想知道是否可以使用Angular材质的对话框将字符串直接传递到dialog.open方法中？我是angular的新手，对话框中只显示一条错误消息。我还想补充一点，就是我不想为其专门创建一个新的HTML文件来显示单个错误消息：P 有人有什么建议吗？

致谢

Answer 1

有可能。在您的组件中，像这样传递变量

const dialogRef = this.dialog.open(myDialogComponent, {data: this.myVariable});

然后在对话框组件中执行此操作

import {MatDialogRef, MAT_DIALOG_DATA} from '@angular/material';
import {Inject} from '@angular/core';

export class myComponent implements OnInit{
  constructor(@Inject(MAT_DIALOG_DATA) public data: any) {
  }
}

ngOnInit () {
  console.log(this.data);
}

Answer 2

或者，对话框组件allows you to specify an <ng-template> (see the MatDialog#open method)包含要显示的对话框的内容：

'<div id="contenido" style="display:none !important;">'+'<table  class="table table-hover mb-0" style="border-collapse: separate !important;hight:border-spacing: 500px 500px!important;" >'+
            '<tr style="font-size: 12px !important;text-align:left !important;">'+
            '<th>Tipo de Permiso</th>'+'<th>Tipo de Permiso </th>'+'<th>Tipo de Permiso</th>'+'</tr>'+
            '<tr style=" font-size: 12px !important; text-align:left !important;"><td>'+accesoUniversal[0]+'</td>'+'<td>'+ accesoUniversal[1] +'</td><td>'+ accesoUniversal[2] +'</td></tr>'+'</table>'+'</div>'+

然后可以使用ViewChild引用<ng-template #yourDialog> <h2 matDialogTitle>Error</h2> <mat-dialog-content> <p>Could not load contents. Try again later.</p> </mat-dialog-content> <mat-dialog-actions align="end"> <button mat-button matDialogClose>Dismiss</button> </mat-dialog-actions> </ng-template>模板对话框：

yourDialog

（可选）您可以pass data进入具有import { TemplateRef, ViewChild } from '@angular/core'; export class YourComponent { @ViewChild('yourDialog') yourDialog: TemplateRef<any>; // ... showErrorDialog() { this.dialog.open(yourDialog); } }属性的模板对话框（因为它将在模板中隐式可用）：

let-data

<ng-template #yourDialog let-data>
  <h2 matDialogTitle *ngIf="data?.title">{{ data.title }}</h2>
  <mat-dialog-content>
    <p *ngIf="data?.message">{{ data.message }}</p>
  <mat-dialog-content>
  <mat-dialog-actions align="end">
    <button mat-button matDialogClose>Dismiss</button>
  </mat-dialog-actions>
</ng-template>

角度对话框

2 个答案: