如何在MatDialogConfig弹窗中渲染带超链接的文本？

Angular默认会转义绑定的文本内容，所以你的带<a>标签的字符串被当成纯文本显示。以下是具体解决方法：

1. 用innerHTML绑定渲染HTML #

在你的DialogComponent模板文件（如dialog.component.html）中，将原本显示message的文本绑定替换为innerHTML绑定：

<!-- 替换原本的 {{ data.message }} 为下面的写法 -->
<div [innerHTML]="data.message"></div>

2. 安全处理HTML（防范XSS） #

如果你的HTML内容来自不可信来源，直接使用innerHTML存在XSS风险，需要用DomSanitizer标记内容为安全：

修改DialogComponent的TypeScript代码：

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

@Component({
  selector: 'app-dialog',
  templateUrl: './dialog.component.html'
})
export class DialogComponent {
  safeMessage: SafeHtml;

  constructor(
    @Inject(MAT_DIALOG_DATA) public data: any,
    private sanitizer: DomSanitizer
  ) {
    // 将HTML内容标记为安全可渲染
    this.safeMessage = this.sanitizer.bypassSecurityTrustHtml(data.message);
  }
}

然后模板中绑定处理后的safeMessage：

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

3. 确保HTML字符串已解码 #

如果后端返回的是转义后的HTML（比如<a href="link 1">click here</a>），需要先解码再传递给对话框：

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

// 传递数据时解码
dialogConfig.data = {
  id: 1,
  description: 'Test Description',
  message: decodeHtmlEntities(data['payload'].testMessage),
  buttonOk: 'Accept'
};

内容的提问来源于stack exchange，提问作者Владимир Гичев