在Angular Material弹窗中集成带ID的<ng-content>失效问题解决

你当前的问题在于通过MAT_DIALOG_DATA传递整个TemplateRef，无法拆分其中的不同内容块匹配弹窗里的<ng-content>插槽。要实现将指定ID的内容放入对应容器，需调整弹窗组件的内容投影设计和弹窗调用方式：

1. 重构弹窗组件模板，定义多插槽内容投影 #

修改HelloComponent的模板，为不同区域设置带选择器的<ng-content>，精准匹配要插入的内容：

<!-- hello.component.html -->
<!-- 带边框的头部容器 -->
<div style="border: 1px solid #666; padding: 12px; margin-bottom: 16px;">
  <ng-content select="[id='header']"></ng-content>
</div>
<!-- 主体内容容器 -->
<div>
  <ng-content select="[id='content']"></ng-content>
</div>

2. 调整弹窗调用逻辑，传递分块的投影内容 #

在AppComponent中，不再传递整个模板引用到弹窗数据里，而是直接创建包含分块内容的模板，将弹窗组件作为容器嵌入其中，再打开这个模板作为弹窗：

模板部分（app.component.html） #

<button (click)="openDialog()">打开弹窗</button>

<!-- 定义弹窗的完整内容，包含要投影到HelloComponent的分块 -->
<ng-template #modalContent>
  <app-hello>
    <div id="header">自定义头部内容</div>
    <div id="content">
      <p>这里可以放入任意组件或内容</p>
      <app-some-child-component></app-some-child-component>
    </div>
  </app-hello>
</ng-template>

TypeScript部分（app.component.ts） #

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

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

  constructor(public dialog: MatDialog) {}

  openDialog() {
    this.dialog.open(this.modalContent, {
      width: '500px',
      data: { name: 'popup' }
    });
  }
}

3. 弹窗组件保持原有逻辑即可 #

HelloComponent无需额外修改，确保能接收MAT_DIALOG_DATA即可：

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

export class HelloComponent implements OnInit {
  constructor(@Inject(MAT_DIALOG_DATA) public data: any) {}
  ngOnInit() {
    console.log(this.data);
  }
}

调整后，带有id="header"的内容会自动插入到弹窗的带边框容器中，其他内容则进入主体区域，实现多组件/内容块的精准投影。

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