Angular数据绑定中如何为含HTML标签的字符串设置样式？

Angular里用{{ text }}插值绑定会自动转义HTML内容，把<、>这类字符转换成实体编码，所以你的<strong>标签只会显示成纯文本，不会被浏览器解析成加粗标签。除了你发现的[innerHTML]，还有几种更规范或更易复用的方法：

• 安全版[innerHTML]（避免XSS风险）
  直接用[innerHTML]如果是不可信的用户输入会有XSS隐患，建议配合DomSanitizer标记内容为安全HTML：
  组件.ts文件：

  import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
  
  export class YourComponent {
    text: string = '<strong>TEXT</strong>';
    safeText: SafeHtml;
  
    constructor(private sanitizer: DomSanitizer) {
      this.safeText = this.sanitizer.bypassSecurityTrustHtml(this.text);
    }
  }
  

  HTML模板：

  <div class="text">
    <p [innerHTML]="safeText"></p>
  </div>
  

• 封装成管道（复用性更强）
  如果多个组件都需要处理HTML字符串，写个管道能避免重复代码：
  先创建safe-html.pipe.ts：

  import { Pipe, PipeTransform } from '@angular/core';
  import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
  
  @Pipe({ name: 'safeHtml' })
  export class SafeHtmlPipe implements PipeTransform {
    constructor(private sanitizer: DomSanitizer) {}
    transform(value: string): SafeHtml {
      return this.sanitizer.bypassSecurityTrustHtml(value);
    }
  }
  

  在组件所属的模块里声明这个管道，之后模板里直接用：

  <div class="text">
    <p [innerHTML]="text | safeHtml"></p>
  </div>
  

本质上这些方法都是绕开Angular的HTML转义机制，让浏览器正常解析标签里的HTML结构，其中配合DomSanitizer是官方推荐的安全做法，能防止恶意HTML注入。

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