Angular向组件传入含Angular Material的动态HTML无法渲染如何解决

你当前的实现方案失效的核心原因是：通过[innerHTML]插入的内容仅会被当做普通DOM字符串处理，Angular编译器不会对这部分内容做解析、组件实例化操作。<mat-icon>是Angular Material提供的Angular组件，不是原生HTML标签，浏览器无法识别未编译的<mat-icon>标签，只会透出标签内部的文本内容。DomSanitizer的作用只是绕过Angular的安全校验，避免自定义HTML被过滤，不会触发Angular的编译流程，因此无法解决组件渲染问题。

方案1：使用内容投影（最易用，推荐） #

这是Angular原生支持的自定义内容插入方案，天然支持组件渲染、事件绑定，不需要额外处理安全或编译逻辑。

1. 修改你的组件模板，替换additionalIcons对应的DOM节点为内容投影插槽：

<my-component>
  <mat-expansion-panel-header>
    <mat-panel-title>
      <h4>{{ title }}</h4>
    </mat-panel-title>
    <div class="additional-icons">
      <!-- 定义带选择器的内容投影插槽 -->
      <ng-content select="[additional-icons]"></ng-content>
    </div>
  </mat-expansion-panel-header>
</my-component>

2. 调用组件时直接传入图标内容即可，支持任意事件绑定、多图标添加：

<my-component param1 ...>
  <ng-container additional-icons>
    <mat-icon aria-label="Label" (click)="handleSettingClick()">settings</mat-icon>
    <mat-icon aria-label="Delete" (click)="handleDelete()">delete</mat-icon>
    <!-- 可自由扩展任意数量、任意类型的组件 -->
  </ng-container>
</my-component>

方案2：使用TemplateRef输入（适合动态切换内容场景） #

如果需要通过输入属性动态切换图标集合，可以使用模板引用作为输入参数：

1. 修改组件的输入属性定义和模板：

// 组件.ts
@Input() additionalIcons: TemplateRef<any>;

<!-- 组件模板 -->
<div class="additional-icons">
  <ng-container *ngTemplateOutlet="additionalIcons"></ng-container>
</div>

2. 调用组件时先定义模板，再传入组件：

<!-- 父组件模板 -->
<ng-template #iconSet1>
  <mat-icon aria-label="Label" (click)="handleSettingClick()">settings</mat-icon>
</ng-template>
<ng-template #iconSet2>
  <mat-icon aria-label="Edit" (click)="handleEdit()">edit</mat-icon>
  <mat-icon aria-label="Delete" (click)="handleDelete()">delete</mat-icon>
</ng-template>

<my-component 
  [additionalIcons]="isAdmin ? iconSet2 : iconSet1"
  param1 
  ...
>
</my-component>

不推荐继续使用HTML字符串传入的方案，若要强行实现需要手动调用Angular编译器完成组件编译，流程复杂且生产环境默认关闭JIT编译器，兼容性、维护成本都很高。

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