Angular组件方法返回含HTML属性的字符串如何渲染为元素？

问题根源 #

Angular默认会转义所有绑定的HTML内容（防止XSS攻击），直接输出HTML字符串会显示为纯文本。另外，routerLink是Angular专属指令，并非原生HTML属性，就算用innerHTML插入，Angular也不会自动解析这个指令，导致链接无法跳转。

推荐解决方案：模板内直接渲染 #

避免在方法中拼接HTML字符串，直接在组件模板里结合数据绑定实现，这是Angular的最佳实践：

1. 在组件类中定义所需变量：

// 组件类内
ipRangeDesc = 'ipRange is part of the IP range';
ipRangeRoute = '/route/ip-ranges/';

2. 在模板中直接编写HTML结构：

{{ ipRangeDesc }} <a [routerLink]="ipRangeRoute">test</a>

这种方式既安全，又能让Angular正常解析routerLink指令，实现跳转功能。

动态HTML场景的解决方案 #

如果必须通过动态生成的HTML字符串渲染，需要结合DomSanitizer和自定义指令来实现：

步骤1：用DomSanitizer标记安全HTML

在组件类中注入DomSanitizer，将HTML字符串转为安全的SafeHtml类型：

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

@Component({
  // 组件元数据
})
export class YourComponent {
  constructor(private sanitizer: DomSanitizer) {}

  private getRangeOriginsText(tags: string[], ipRange: string): SafeHtml {
    const htmlContent = `ipRange is part of the IP range <a routerLink="/route/ip-ranges/"> test </a>`;
    return this.sanitizer.bypassSecurityTrustHtml(htmlContent);
  }
}

步骤2：创建自定义指令解析routerLink

由于innerHTML不会解析Angular指令，需要自定义一个指令来处理动态HTML中的routerLink：

import { Directive, ElementRef, OnInit, Renderer2, Inject } from '@angular/core';
import { Router } from '@angular/router';
import { DOCUMENT } from '@angular/common';

@Directive({
  selector: '[appDynamicRouterLink]'
})
export class DynamicRouterLinkDirective implements OnInit {
  constructor(
    private el: ElementRef,
    private renderer: Renderer2,
    private router: Router,
    @Inject(DOCUMENT) private document: Document
  ) {}

  ngOnInit(): void {
    // 获取所有带routerLink属性的a标签
    const links = this.el.nativeElement.querySelectorAll('a[routerLink]');
    links.forEach((link: HTMLElement) => {
      const targetRoute = link.getAttribute('routerLink');
      if (targetRoute) {
        // 绑定点击事件，触发路由跳转
        this.renderer.listen(link, 'click', (event) => {
          event.preventDefault();
          this.router.navigate([targetRoute]);
        });
      }
    });
  }
}

步骤3：在模板中使用

将处理后的HTML通过innerHTML绑定，并添加自定义指令：

<div [innerHTML]="getRangeOriginsText(tags, ipRange)" appDynamicRouterLink></div>

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