angular - Angular Material カスタム ダイアログでコンポーネントを表示する

Question

再利用可能なカスタム マテリアル 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' }

それは私の CustomDialogComponent です:

export class CustomDialogComponent implements OnInit {

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

  ngOnInit() {
  }