Angular 13动态对话框组件ng-content内容投影问题求助

针对你的需求，分两种场景给出最简洁的实现方案，完全符合你避免拼接HTML、复用组件的要求：

场景1：对话框组件直接在主组件模板中渲染（通过*ngIf控制显隐） #

这种场景下<ng-content>是完全生效的，你之前没达到预期可能是组件的显隐逻辑或结构问题，以下是正确实现：

对话框组件代码 #

// dialog.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-dialog',
  template: `
    <div class="dialog-wrap" *ngIf="visible">
      <div class="dialog-header">
        <h3>静态标题</h3>
        <button (click)="visible = false">×</button>
      </div>
      <div class="dialog-content">
        <!-- 用ng-content接收主组件传入的任意HTML内容 -->
        <ng-content></ng-content>
      </div>
    </div>
    <!-- 遮罩层 -->
    <div class="dialog-mask" *ngIf="visible" (click)="visible = false"></div>
  `,
  styles: [`
    .dialog-wrap {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: #fff;
      padding: 20px;
      border-radius: 4px;
      z-index: 1001;
    }
    .dialog-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;
    }
    .dialog-mask {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,0.5);
      z-index: 1000;
    }
  `]
})
export class DialogComponent {
  visible = false;

  open() {
    this.visible = true;
  }
}

主组件调用代码 #

// app.component.ts
import { Component, ViewChild } from '@angular/core';
import { DialogComponent } from './dialog.component';

@Component({
  selector: 'app-root',
  template: `
    <button (click)="openDialog()">打开对话框</button>
    <!-- 直接在组件标签内写入要传递的HTML内容 -->
    <app-dialog>
      <p>这是主组件传入的动态内容</p>
      <input type="text" placeholder="支持表单元素">
      <button (click)="doSomething()" style="margin-left: 10px;">执行操作</button>
    </app-dialog>
  `
})
export class AppComponent {
  @ViewChild(DialogComponent) dialog!: DialogComponent;

  openDialog() {
    this.dialog.open();
  }

  doSomething() {
    alert('触发了主组件的方法');
  }
}

场景2：通过服务动态创建对话框（比如Angular Material Dialog） #

如果你的对话框是通过服务动态创建的（而非直接在主组件模板中渲染），<ng-content>无法生效（因为动态组件不在主组件DOM树中），这时候用TemplateRef结合ngTemplateOutlet是最简洁的方案，你之前尝试该方案未成功，大概率是传递或渲染逻辑有误，以下是正确实现：

对话框组件代码 #

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

@Component({
  selector: 'app-dialog',
  template: `
    <h2>静态标题</h2>
    <!-- 用ngTemplateOutlet渲染传入的模板内容 -->
    <ng-container [ngTemplateOutlet]="data.contentTpl"></ng-container>
    <div style="text-align: right; margin-top: 20px;">
      <button mat-button (click)="close()">关闭</button>
    </div>
  `
})
export class DialogComponent {
  constructor(
    @Inject(MAT_DIALOG_DATA) public data: { contentTpl: TemplateRef<any> },
    private dialogRef: MatDialogRef<DialogComponent>
  ) {}

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

主组件调用代码 #

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

@Component({
  selector: 'app-root',
  template: `
    <button mat-button (click)="openDialog()">打开对话框</button>

    <!-- 用#contentTpl标记要传递的内容模板 -->
    <ng-template #contentTpl>
      <p>动态传入的自定义内容</p>
      <mat-form-field style="width: 100%;">
        <input mat-input placeholder="支持Material组件">
      </mat-form-field>
      <button mat-raised-button color="primary" (click)="handleAction()">执行主组件逻辑</button>
    </ng-template>
  `
})
export class AppComponent {
  @ViewChild('contentTpl') contentTpl!: TemplateRef<any>;

  constructor(private dialog: MatDialog) {}

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

  handleAction() {
    alert('主组件方法被调用');
  }
}

关键说明 #

• 场景1的<ng-content>方案适用于直接在模板中渲染的对话框，写法最简单，完全满足你传递指定HTML的需求。
• 场景2的TemplateRef方案适用于动态创建的对话框，不需要单独创建模板文件，仅在主组件中用<ng-template>标记要传递的内容即可，简洁且可复用。

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