如何在Angular 4+中渲染包含HTML标签的字符串？

嘿，这个问题我太熟悉了！Angular出于安全考虑，默认会把双大括号{{}}里的内容当成纯文本转义，所以你的HTML标签才会原样显示出来。要让<strong><em>abc</em></strong>这类标签生效，实现粗体加斜体的效果，有两种实用方案，看你的场景选：

方案1：直接使用[innerHTML]绑定（适用于可信内容） #

如果你的HTML内容是自己写的、确定安全的，直接用Angular的[innerHTML]属性绑定就行：

1. 在组件的.ts文件里定义带HTML的字符串：

// 比如你的组件是app-demo.component.ts
export class AppDemoComponent {
  // 定义包含HTML标签的内容
  formattedText: string = '<strong><em>abc</em></strong>';
}

2. 在组件的.html模板里用[innerHTML]替代双大括号：

<!-- 这样渲染出来的abc就是粗体加斜体 -->
<div [innerHTML]="formattedText"></div>

划重点：别用{{formattedText}}，那会把<strong>这些标签当成普通文本显示！

方案2：用DomSanitizer处理不可信内容（安全优先） #

如果你的HTML内容来自用户输入、第三方接口这类不可信来源，Angular会自动拦截不安全的HTML，这时候需要用DomSanitizer来标记内容为安全：

1. 先在组件里导入相关依赖：

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

@Component({
  selector: 'app-demo',
  templateUrl: './app-demo.component.html'
})
export class AppDemoComponent {
  formattedText: SafeHtml;

  constructor(private sanitizer: DomSanitizer) {
    // 假设这是从外部获取的HTML内容
    const rawHtml = '<strong><em>abc</em></strong>';
    // 标记内容为安全的HTML
    this.formattedText = this.sanitizer.bypassSecurityTrustHtml(rawHtml);
  }
}

2. 模板里还是用[innerHTML]绑定：

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

额外小提示 #

如果只是想给固定文本加样式，其实完全不用HTML字符串，直接在模板里写标签或者用样式绑定更简单：

<!-- 直接写HTML标签 -->
<div><strong><em>abc</em></strong></div>

<!-- 用Angular样式绑定 -->
<div [style.fontStyle]="'italic'" [style.fontWeight]="'bold'">abc</div>

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