Angular 12中div的innerHTML变量绑定问题咨询

直接用{{value}}会把HTML内容转义成纯文本显示，无法渲染出预期的HTML结构，你需要使用Angular的属性绑定语法来实现innerHTML绑定：

1. 基础用法（可信HTML内容） #

在组件类中定义存储HTML内容的变量：

// 组件.ts文件
export class YourComponent {
  htmlContent: string = '<h2>示例标题</h2><p>包含<strong>加粗</strong>和<em>斜体</em>的文本内容</p>';
}

在模板中通过[innerHTML]绑定到div：

<!-- 组件.html文件 -->
<div [innerHTML]="htmlContent"></div>

2. 处理需绕过安全检查的HTML #

Angular默认会清理绑定的HTML内容以防范XSS攻击，如果你的HTML来源完全可信且需要保留所有代码，可以使用DomSanitizer：

// 组件.ts文件
import { Component } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

export class YourComponent {
  safeHtmlContent: SafeHtml;

  constructor(private sanitizer: DomSanitizer) {
    const unsafeHtml = '<div>自定义HTML内容</div>';
    this.safeHtmlContent = this.sanitizer.bypassSecurityTrustHtml(unsafeHtml);
  }
}

模板绑定方式不变：

<div [innerHTML]="safeHtmlContent"></div>

⚠️ 注意：仅当你100%信任HTML内容来源时才使用此方法，避免引入安全风险。

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