在“角材料自定义”对话框中显示组件

问题描述

我有一个可重用的自定义“材质UI”对话框，我想在其中显示其他组件。 例如，onne time调用它并显示一个Login组件，另一个时间显示一个注册组件，这只是示例。

问题是当我将组件分配给主体（body：InvitingComponent）时，结果是正确的对话框，但是主体（或内容）是组件的代码。当您发送文本时，没关系，但是当我想发送组件以显示在Dialog的中间时，这是不可能的。问题是，某个人如何将组件作为对象或模板发送以显示在对话框中？ 邀请组件由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' }

这是我的CustomDialogComponent：

export class CustomDialogComponent implements OnInit {

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

  ngOnInit() {
  }

解决方法

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