如何在Ionic ion-text中正确使用API返回的HTML字符串？

解决思路 #

直接用插值语法{{textInsert}}会把HTML实体（比如<、>）当成纯文本显示，需要三步处理：

• 解码API返回字符串中的HTML实体，还原成真实的HTML标签
• 告诉Angular该HTML内容是安全的，避免被XSS防护机制转义
• 使用[innerHTML]绑定替代插值语法来渲染HTML

具体实现 #

1. 组件TS文件处理 #

在你的组件类中，导入DomSanitizer和SafeHtml，注入 sanitizer 服务，解码并处理字符串：

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.scss'],
})
export class YourComponentComponent {
  // 从API获取的原始字符串
  textInsert = "<p>Hello</p><br><p>There</p>";
  // 处理后的安全HTML内容
  safeTextInsert: SafeHtml;

  constructor(private sanitizer: DomSanitizer) {
    // 先解码HTML实体
    const decodedHtml = this.decodeHtmlEntities(this.textInsert);
    // 标记为安全HTML
    this.safeTextInsert = this.sanitizer.bypassSecurityTrustHtml(decodedHtml);
  }

  // 辅助函数：解码HTML实体
  private decodeHtmlEntities(html: string): string {
    const textArea = document.createElement('textarea');
    textArea.innerHTML = html;
    return textArea.value;
  }
}

2. 模板文件修改 #

把原来的插值语法替换为[innerHTML]绑定，绑定处理后的safeTextInsert属性：

<ion-text color="secondary" [innerHTML]="safeTextInsert">
</ion-text>

注意事项 #

• 只有当你完全信任API返回的内容时，才使用bypassSecurityTrustHtml，否则可能存在XSS攻击风险
• 解码HTML实体的步骤是必须的，因为API返回的字符串里的<和>被转义成了<和>，不解码的话无法还原成真实的HTML标签

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