Angular项目如何将API返回的<a>标签渲染为可点击超链接

问题原因 #

Angular默认开启了内容安全转义机制：一方面{{ }}插值语法会把所有绑定内容作为纯文本渲染，另一方面会自动过滤不信任的HTML内容，防止XSS攻击。同时你接口返回的a标签是经过HTML实体编码的（<对应<、"对应"），需要先解码才能识别为正常DOM标签。 #

实现步骤 #

• 第一步：在组件中引入DomSanitizer服务，用于标记可信任的HTML内容
• 第二步：编写HTML实体解码方法，将编码后的标签还原为正常HTML代码
• 第三步：对接口返回的hrefmessages字段依次做解码、安全标记处理
• 第四步：模板中使用[innerHTML]属性绑定处理后的内容，不要用插值语法

完整代码示例 #

组件TS代码 #

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  apiresponse: any = {
    message: 'message',
    response: [
      {
        hrefmessages: 'i need this link to be shown as hyperlink <a class="test" href="https://www.google.com/" target="_blank">click here</a>. ',
        icons: [
          {
            icon1: 'hello',
            name: 'hello',
            age: 'hello',
          },
        ],
      },
      {
        hrefmessages: 'This is also a href test message',
        icons: [
          {
            icon1: 'test',
            name: 'test',
            age: 'test',
          },
        ],
      },
    ],
  };
  // 存储处理后的安全渲染内容
  processedMessages: SafeHtml[] = [];

  constructor(private sanitizer: DomSanitizer) {}

  ngOnInit() {
    this.processResponse();
  }

  // HTML实体解码工具方法
  decodeHtml(html: string): string {
    const doc = new DOMParser().parseFromString(html, 'text/html');
    return doc.documentElement.textContent || '';
  }

  // 批量处理接口返回数据
  processResponse() {
    this.apiresponse.response.forEach(item => {
      const decodedHtml = this.decodeHtml(item.hrefmessages);
      // 仅在API来源完全可信时使用该方法标记安全
      const safeHtml = this.sanitizer.bypassSecurityTrustHtml(decodedHtml);
      this.processedMessages.push(safeHtml);
    });
  }
}

模板HTML代码 #

<div *ngFor="let safeContent of processedMessages">
  <div [innerHTML]="safeContent"></div>
</div>

注意事项 #

该方案会跳过Angular默认的XSS安全检查，必须确保返回HTML的API来源是完全可信的，如果存在第三方不可控内容，建议引入DOMPurify库对解码后的HTML做XSS过滤后再标记为安全内容。

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