Angular Material Dialog弹窗内自定义组件无法渲染问题

出现这个问题的核心是：Angular没有把弹窗模板里的<my-component>标签识别为你声明的组件，只把它当成了普通的自定义HTML元素渲染，所以不会生成组件内部的模板内容。

你在普通页面模板里能正常使用<my-component>，是因为普通页面的模板编译上下文里已经声明了这个组件，Angular知道这个标签对应哪个组件类、要渲染什么内容。
但Angular Material的Dialog是动态创建组件的，动态加载的组件不会继承调用dialog.open()的那个页面组件的编译上下文，它只会使用自身所属的编译环境：

• 传统NgModule模式下，使用组件声明所在的NgModule的编译上下文
• 独立组件模式下，使用组件自身imports数组声明的依赖上下文

你现在的DOM结构里<my-component>是空标签，没有内部的<p>I am a simple component</p>节点，就直接证明了Angular没有把这个标签解析为对应组件。

根据你用的Angular开发模式选对应处理方式即可：

传统NgModule模式 #

• 确认MyComponent已经声明在ModalComponent所属的NgModule的declarations数组中，如果MyComponent是从其他模块引入的，要确保那个模块已经把MyComponent加入了exports数组，且ModalComponent所属模块已经导入了该模块
• 确认ModalComponent本身已经正确声明在对应NgModule中，不要出现组件写了但没加入任何模块declarations的情况
• Angular 9以前的旧版本需要把ModalComponent加入所属NgModule的entryComponents数组，新版本Angular不需要该配置

Angular 14+ 独立组件模式 #

如果你的ModalComponent是标记了standalone: true的独立组件，必须在组件装饰器的imports数组中显式导入MyComponent，否则模板无法识别该标签：

@Component({
  selector: 'modal',
  standalone: true,
  imports: [MyComponent], // 导入依赖的组件
  template: '<my-component></my-component>',
})
class ModalComponent {
  constructor(
    @Inject(MAT_DIALOG_DATA) public data: any
  ) {}
}

注意：不要误以为页面里能正常使用的组件，在动态加载的弹窗里就可以直接用，二者的编译上下文是完全隔离的。

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