如何向Angular的MatDialog组件传递并渲染自定义模板

你遇到的问题核心是Angular不会自动解析字符串模板，也无法直接通过组件类完成渲染，下面提供两种可行的解决思路：

方案1：传递TemplateRef（最简便，推荐） #

这种方式直接利用Angular的模板引用机制，无需动态创建组件，适配绝大多数场景。

父组件修改 #

在父组件模板中定义要插入的内容模板，添加模板引用变量：

<ng-template #customDialogContent>
  <app-my-content></app-my-content>
</ng-template>
<button (click)="openDialog()">打开对话框</button>

父组件TS中获取该模板引用，打开Dialog时作为data传递：

import { Component, TemplateRef, ViewChild } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { DialogComponent } from './dialog/dialog.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  @ViewChild('customDialogContent') customContent!: TemplateRef<any>;

  constructor(private dialog: MatDialog) {}

  openDialog() {
    this.dialog.open(DialogComponent, {
      data: { contentTemplate: this.customContent }
    });
  }
}

可复用对话框组件修改 #

在对话框模板中使用ngTemplateOutlet渲染传入的模板：

<h2>可复用对话框</h2>
<ng-container *ngTemplateOutlet="data.contentTemplate"></ng-container>
<button mat-button (click)="close()">关闭</button>

对话框TS直接使用传入的data即可，无需额外操作：

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

@Component({
  selector: 'app-dialog',
  templateUrl: './dialog.component.html',
})
export class DialogComponent {
  constructor(
    public dialogRef: MatDialogRef<DialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any
  ) {}

  close() {
    this.dialogRef.close();
  }
}

方案2：动态创建组件（适合需要控制组件实例的场景） #

如果需要对插入的组件进行实例化控制（比如传参、监听组件事件），可以使用动态组件创建的方式。

可复用对话框组件修改 #

在模板中添加一个ViewContainerRef作为组件容器：

<h2>可复用对话框</h2>
<div #componentContainer></div>
<button mat-button (click)="close()">关闭</button>

对话框TS中通过ViewContainerRef动态创建传入的组件：

import { Component, Inject, ViewChild, ViewContainerRef, OnInit } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { ComponentFactoryResolver } from '@angular/core';

@Component({
  selector: 'app-dialog',
  templateUrl: './dialog.component.html',
})
export class DialogComponent implements OnInit {
  @ViewChild('componentContainer', { read: ViewContainerRef }) container!: ViewContainerRef;

  constructor(
    public dialogRef: MatDialogRef<DialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: { component: any },
    private resolver: ComponentFactoryResolver
  ) {}

  ngOnInit() {
    const factory = this.resolver.resolveComponentFactory(this.data.component);
    const componentRef = this.container.createComponent(factory);
    // 如需给组件传参，可通过componentRef.instance操作：
    // componentRef.instance.someInput = '自定义参数';
  }

  close() {
    this.dialogRef.close();
  }
}

父组件修改 #

打开Dialog时直接传递目标组件类：

import { Component } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { DialogComponent } from './dialog/dialog.component';
import { AppMyContentComponent } from './app-my-content/app-my-content.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  constructor(private dialog: MatDialog) {}

  openDialog() {
    this.dialog.open(DialogComponent, {
      data: { component: AppMyContentComponent }
    });
  }
}

注意事项 #

• Angular 14以下版本：需要在模块的entryComponents数组中声明目标组件（如AppMyContentComponent）；
• Angular 14+版本：使用独立组件的话，直接在组件的imports数组中引入目标组件即可。

内容的提问来源于stack exchange，提问作者Kaspacainoombro