在 Material MatDialog 中动态加载组件

谁能提供一个如何将组件动态加载到 Material MatDialog 中的示例？

我想做的是：我将为 MatDialog 配置数据提供一个组件类型，然后对话框将创建一个实例并将其放置在其 mat-dialog-content 区域内。

看来我需要使用 ng-template 和 viewContainerRef 的某种组合，但我不知道如何实例化提供的组件类型并插入到所需的区域。

一个简单的例子：

    <h2 mat-dialog-title>MyTitle</h2>
    <mat-dialog-content>
     <---- dynamically loaded component would be inserted here ---->
    </mat-dialog-content>

    <mat-dialog-actions>
      <button mat-button mat-dialog-close>Cancel</button>
      <button mat-button [mat-dialog-close]="true">Save</button>
    </mat-dialog-actions>

有不同的选择：

1)内置结构指令ngComponentOutlet

<ng-container *ngComponentOutlet="data.component"></ng-container> 

Example https://ng-run.com/edit/uhR7qzifwhr3QH9fNOMv?open=app%2Fapp.component.ts

2)使用角材料cdk。更准确地说，你可以使用PortalModule从辅助入口点@angular/cdk/portal

对话框组件.ts

import { ComponentPortal } from '@angular/cdk/portal';

@Component({...})
export class DialogDialog {

  portal: ComponentPortal<any>;

  constructor(...
    @Inject(MAT_DIALOG_DATA) public data: any) { }

  ngOnInit() {
    this.portal = new ComponentPortal(this.data.component);
  }
      

对话框.组件.html

<ng-template [cdkPortalOutlet]="portal"></ng-template>

Example https://ng-run.com/edit/OP87U87X2gR7U4ZmsxN3?open=app%2Fdialog.component.html

3)使用 Angular 低级 API

对话框组件.ts

@Component({...})
export class DialogDialog {

  @ViewChild('target', { read: ViewContainerRef }) vcRef: ViewContainerRef;

  componentRef: ComponentRef<any>;

  constructor(
    ...
    private resolver: ComponentFactoryResolver,
    @Inject(MAT_DIALOG_DATA) public data: any) { }

  ngOnInit() {
    const factory = this.resolver.resolveComponentFactory(this.data.component);
    this.componentRef = this.vcRef.createComponent(factory);
  }


  ngOnDestroy() {
    if (this.componentRef) {
      this.componentRef.destroy();
    }
  }  
}

对话框.组件.html

<ng-template #target></ng-template>

Example https://ng-run.com/edit/9giHmJ8bzMa8tBcZAm5t?open=app%2Fdialog.component.html