Angular使用{{element.innerHTML}}插值时<br>标签被识别为文本如何解决？

问题原因 #

你使用的{{}}双大括号是Angular的字符串插值语法，为了防范XSS攻击，默认会把所有HTML标签转义为普通文本，所以即使你读取的是element.innerHTML内容，通过插值语法渲染也会把<br>等标签转义为纯文本展示。

解决方案 #

方案1：直接使用[innerHTML]属性绑定（适合内容完全可信的场景） #

直接修改span标签的绑定方式即可，不需要修改组件逻辑：

<!-- 把原来的 {{element.innerHTML}} 替换为属性绑定 -->
<span class="floatLeft" [innerHTML]="element.innerHTML"></span>

修改后Angular会把绑定的内容直接作为HTML解析，<br>标签会正常生效为换行。

方案2：配合DomSanitizer处理（适合需要主动标记内容安全的场景） #

如果Angular拦截了你的内容提示不安全，你可以在组件中引入DomSanitizer对内容做安全标记：

1. 组件TS文件逻辑：

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  // 其他原有逻辑保持不变
  constructor(private sanitizer: DomSanitizer) {}

  getSafeHtml(rawHtml: string): SafeHtml {
    return this.sanitizer.bypassSecurityTrustHtml(rawHtml);
  }
}

2. 模板中调用方法做绑定：

<span class="floatLeft" [innerHTML]="getSafeHtml(element.innerHTML)"></span>

注意：bypassSecurityTrustHtml仅可用于你完全确认来源安全的内容，如果内容包含未经过滤的用户自由输入，会存在XSS攻击风险。

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