Angular 15独立组件中如何引入innerHTML？

innerHTML是Angular模板原生支持的绑定语法，不需要额外导入任何模块或依赖，直接在独立组件的模板里使用即可，和你提到的仅导入NgIf这类指令的摇树优化思路不冲突。

关键说明： #

• 之前依赖CommonModule才能用innerHTML是误解，innerHTML属于模板绑定能力，和CommonModule包含的结构型指令（如NgIf、NgFor）完全是两回事。
• 你提到的ɵDomAdapter（应该是输入时的笔误eDomAdapter）是Angular的内部私有API，命名带ɵ前缀的都是框架内部实现细节，绝对不能在业务代码中直接导入使用——Angular官方不会承诺这类API的稳定性，后续版本随时可能变更或移除。

实际使用示例： #

1. 基础用法（直接绑定HTML字符串）

不需要任何额外配置，直接在模板里绑定即可：

import { Component } from '@angular/core';

@Component({
  selector: 'app-simple-innerhtml',
  standalone: true,
  template: `<div [innerHTML]="basicHtml"></div>`
})
export class SimpleInnerhtmlComponent {
  basicHtml = '<h3>这是直接绑定的HTML内容</h3><p>无需导入任何模块</p>';
}

2. 处理安全过滤（允许可信HTML）

Angular默认会对innerHTML的内容做安全清理，如果需要渲染包含自定义样式、特定标签的内容，可通过DomSanitizer服务处理：

import { Component, DomSanitizer, SafeHtml } from '@angular/core';

@Component({
  selector: 'app-trusted-innerhtml',
  standalone: true,
  template: `<div [innerHTML]="trustedHtml"></div>`
})
export class TrustedInnerhtmlComponent {
  constructor(private sanitizer: DomSanitizer) {}

  get trustedHtml(): SafeHtml {
    // 标记内容为可信HTML，跳过默认清理
    return this.sanitizer.bypassSecurityTrustHtml(`
      <div style="color: blue; font-size: 18px;">
        这是经过安全处理的HTML内容
        <p>支持自定义样式</p>
      </div>
    `);
  }
}

总结 #

• innerHTML无需额外导入，直接使用模板绑定即可
• 坚决避免使用Angular内部私有API（如ɵDomAdapter）
• 有安全需求时，通过官方提供的DomSanitizer处理内容

内容的提问来源于stack exchange，提问作者Raphaël Balet