0

我有一个可重复使用的自定义 Material UI 对话框,我想在其中显示一个不同的组件。例如,一次调用它并显示一个登录组件,另一次显示一个注册组件,这只是示例。

问题是当我将我的组件分配给正文(正文:InvitationComponent)时,结果是一个正确的对话框,但正文(或内容)是我的组件的代码。当您发送文本时,没关系,但是当我想发送一个组件以显示在对话框中间时,这是不可能的。问题是如何将组件作为对象或模板发送以在对话框中显示?邀请组件由 shome html 代码和 iput 控件和一个按钮组成,我想在我的对话框中间显示它。(例如,我们可以在 iframe 中显示的页面)提前感谢您的帮助。

    <div class="title">
        <h2 mat-dialog-title>{{ data.title }}</h2>
        <span mat-dialog-close class="material-icons closeButton">close</span>
    </div>
    <hr>
    <div>
        <mat-dialog-content class="mat-typography">
            {{ data.body }}
        </mat-dialog-content>
        <hr>
        <div class="actionSection">
            <mat-dialog-actions>
                <button mat-button class="secondary" mat-dialog-close>{{ data.cancelButton }}</button>
            </mat-dialog-actions>
        </div>
    </div>
</div>

我显示的对话框

my calling code is:
const dialogRef = this.dialogService.open(CustomDialogComponent,
      {
        hasBackdrop: true,
        disableClose:true,
        data:{
          title: 'Invite User',
          body: InvitationComponent,
          cancelButton: 'Close' }

那是我的自定义对话框组件:

export class CustomDialogComponent implements OnInit {

  constructor(@Inject(MAT_DIALOG_DATA) public data: any,
    private dialogRef: MatDialogRef<CustomDialogComponent>) {
    console.log(data.body);
  }

  ngOnInit() {
  }
4

1 回答 1

0

您可以在通用对话框组件 html 中只有两个不同的模板,并根据调用呈现其中的任何一个。为了更好地理解,我制作了一个 stackblitz 示例:https ://stackblitz.com/edit/angular-mat-dialog-kfdktu

于 2020-10-20T13:09:05.493 回答