Angular 16独立动态组件中如何使用Material模块？

针对你遇到的动态组件无法识别mat-icon等Material组件的问题，可以通过以下步骤解决：

1. 修正模板的HTML转义问题 #

你的模板中使用了HTML实体（如<、"），这会导致Angular将这些内容解析为文本而非HTML组件。直接使用原生HTML标签即可：

let tpl = `
 <div>
   <mat-icon aria-label="home icon" fontIcon="home"></mat-icon>
   <div>Hello</div>
   <testcomponent>this works ok</testcomponent>
 </div>
`

2. 确保Material模块正确导入并避免摇树优化 #

尽管你已经在imports中添加了MatIconModule，Angular的摇树优化可能会移除未被显式引用的模块。可以在动态组件类中添加一个无用的引用，强制保留模块：

import { MatIconModule, MatIcon } from '@angular/material/icon';
// 其他必要导入...

let component = Component({
        standalone: true,
        selector: 'cp1',
        template: tpl,
        imports: [
            CommonModule,
            NgIf,
            NgFor,
            MatIconModule,
            MyTestComponent
        ]
    })
    (class DynamicComponentImpl extends DynamicComponent {
        // 显式引用MatIcon，防止摇树优化移除模块
        private _keepMatIcon?: MatIcon;
        constructor() {
            super();
        }
    })

3. 验证Material资源配置 #

确保你的项目已正确配置Material的主题和字体：

• 在angular.json的styles数组中添加Material主题：

  "styles": [
    "@angular/material/prebuilt-themes/indigo-pink.css",
    "src/styles.css"
  ]
  

• 在index.html中加载Material Icons字体（如果使用图标字体）：

  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  

4. 确认Injector传递正确 #

动态创建组件时，确保传递的injector能访问到必要的依赖。如果父组件所在的上下文已配置Material，使用container.injector即可：

container.createComponent(component, {injector: container.injector});

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