如何向Angular对话框传递自定义模板

针对你需要实现类似 React children 方式传递自定义内容的通用对话框需求，因为 MatDialog 是动态创建组件（挂载到独立的 overlay 容器），无法直接使用 <ng-content>，下面提供两种实用方案：

方案一：传递模板引用（适合静态/简单自定义内容） #

这种方式最接近 React 的 children 用法，通过 TemplateRef 传递自定义模板，在对话框中渲染。

1. 创建通用对话框组件 #

组件类（generic-dialog.component.ts）

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

// 定义对话框数据结构
export interface GenericDialogData {
  title: string;
  message: string;
  customContent?: TemplateRef<any>;
}

@Component({
  selector: 'app-generic-dialog',
  templateUrl: './generic-dialog.component.html',
})
export class GenericDialogComponent {
  constructor(@Inject(MAT_DIALOG_DATA) public data: GenericDialogData) {}
}

模板（generic-dialog.component.html）

<h2 mat-dialog-title>{{ data.title }}</h2>
<mat-dialog-content>
  <p>{{ data.message }}</p>
  <!-- 渲染传入的自定义模板 -->
  <ng-container *ngIf="data.customContent" [ngTemplateOutlet]="data.customContent"></ng-container>
</mat-dialog-content>
<mat-dialog-actions>
  <button mat-button mat-dialog-close>关闭</button>
</mat-dialog-actions>

2. 在父组件中使用 #

父组件模板（app.component.html）

<button mat-button (click)="openDialog()">打开对话框</button>

<!-- 定义自定义模板，用#标记供组件引用 -->
<ng-template #customContent>
  <p class="custom">这是自定义内容！</p>
  <mat-checkbox>我同意服务条款</mat-checkbox>
</ng-template>

父组件类（app.component.ts）

import { Component, ViewChild, TemplateRef } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { GenericDialogComponent, GenericDialogData } from './generic-dialog/generic-dialog.component';

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

  constructor(private dialog: MatDialog) {}

  openDialog() {
    const dialogData: GenericDialogData = {
      title: '通用对话框',
      message: '这是默认消息内容',
      customContent: this.customContent
    };

    this.dialog.open(GenericDialogComponent, { data: dialogData });
  }
}

方案二：传递自定义组件（适合带逻辑/交互的复杂内容） #

如果自定义内容需要独立的业务逻辑（比如表单、事件处理），可以用 ComponentPortal 渲染自定义组件。

1. 创建自定义内容组件 #

import { Component } from '@angular/core';

@Component({
  selector: 'app-custom-dialog-content',
  template: `
    <p class="custom">这是带交互逻辑的自定义内容</p>
    <button mat-button (click)="handleClick()">点击触发事件</button>
  `
})
export class CustomDialogContentComponent {
  handleClick() {
    alert('自定义组件的按钮被点击了！');
  }
}

2. 修改通用对话框组件 #

组件类（generic-dialog.component.ts）

import { Component, Inject, ViewChild, ViewContainerRef } from '@angular/core';
import { MAT_DIALOG_DATA } from '@angular/material/dialog';
import { ComponentPortal } from '@angular/cdk/portal';

export interface GenericDialogData {
  title: string;
  message: string;
  customComponent?: any; // 自定义组件类型
}

@Component({
  selector: 'app-generic-dialog',
  templateUrl: './generic-dialog.component.html',
})
export class GenericDialogComponent {
  @ViewChild('customComponentContainer', { read: ViewContainerRef }) container!: ViewContainerRef;

  constructor(@Inject(MAT_DIALOG_DATA) public data: GenericDialogData) {}

  ngOnInit() {
    if (this.data.customComponent) {
      // 创建组件门户并渲染到容器中
      const portal = new ComponentPortal(this.data.customComponent);
      this.container.createComponent(portal);
    }
  }
}

模板（generic-dialog.component.html）

<h2 mat-dialog-title>{{ data.title }}</h2>
<mat-dialog-content>
  <p>{{ data.message }}</p>
  <!-- 自定义组件的渲染容器 -->
  <div #customComponentContainer></div>
</mat-dialog-content>
<mat-dialog-actions>
  <button mat-button mat-dialog-close>关闭</button>
</mat-dialog-actions>

3. 父组件调用 #

openDialogWithCustomComponent() {
  const dialogData: GenericDialogData = {
    title: '带自定义组件的对话框',
    message: '下面是带逻辑的自定义内容',
    customComponent: CustomDialogContentComponent
  };

  this.dialog.open(GenericDialogComponent, { data: dialogData });
}

注意：自定义组件需要在模块的 declarations 和 entryComponents 中声明（Angular 9+ Ivy 模式下可省略 entryComponents）。

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