Angular中如何在插值绑定内为指定文本添加跳转链接？

1. 组件内处理错误信息，转换为带链接的安全HTML #

首先在组件中导入DomSanitizer和SafeHtml，然后编写逻辑将原始错误信息里的"contact google"替换为带跳转链接的HTML标签，同时把处理后的内容标记为Angular信任的安全HTML（避免被安全机制拦截）。

示例代码：

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

export class AppComponent implements OnInit {
  servicerequest = {
    errormessage: "This site is not working. please contact google for more information"
  };
  safeErrorHtml: SafeHtml;

  constructor(private sanitizer: DomSanitizer) {}

  ngOnInit() {
    // 替换指定文本为跳转链接
    const formattedMsg = this.servicerequest.errormessage.replace(
      'contact google',
      '<a href="https://www.google.com" target="_blank" rel="noopener noreferrer">contact google</a>'
    );
    // 标记为安全HTML，防止Angular过滤
    this.safeErrorHtml = this.sanitizer.bypassSecurityTrustHtml(formattedMsg);
  }
}

如果需要匹配不同大小写或多次出现的"contact google"，可以用正则全局匹配：

const formattedMsg = this.servicerequest.errormessage.replace(
  /contact google/gi,
  '<a href="https://www.google.com" target="_blank" rel="noopener noreferrer">contact google</a>'
);

2. 模板中使用[innerHTML]绑定内容 #

不能用插值绑定{{}}（会把HTML转义成纯文本），要通过[innerHTML]绑定处理后的安全HTML：

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

关键说明 #

• Angular默认会过滤innerHTML中的未知HTML内容，所以必须用DomSanitizer.bypassSecurityTrustHtml标记内容为安全，才能正常渲染链接。
• 添加target="_blank"和rel="noopener noreferrer"是为了安全打开新窗口，避免钓鱼风险。

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