如何在Angular的HTML标签title属性中显示特殊字符？

AI 小北

2026-6-29

Angular中如何让title属性的特殊字符正常渲染为符号？

在Angular项目的HTML中，为<a>标签的title属性绑定包含文本与特殊字符（如©）的值时，鼠标悬停的工具提示无法正常渲染特殊字符，仅显示其文本形式。

代码示例

HTML代码：

<a [title]="getSanitizedContent(value)"></a>
<a [title]="value"></a>
<a title="&copy;"></a>

TypeScript代码：

value = '&copy;';

constructor(private sanitizer: DomSanitizer) {}

getSanitizedContent(value: string): void {
  return this.sanitizer.bypassSecurityTrustHtml(value);
}

遇到的问题

使用DomSanitizer时，工具提示显示错误：safevalue must use [property]=binding:'©'
直接绑定value时，工具提示显示©文本而非渲染后的©符号
硬编码title值时，特殊字符能正常渲染（说明编码本身没问题，问题出在绑定方式）

解决方案

方案1：手动解码HTML实体

Angular不会自动解析绑定字符串中的HTML实体，因此需要手动将实体编码转换为对应字符。可以通过创建管道或组件方法实现：

创建解码管道（推荐，可复用）：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'decodeHtml' })
export class DecodeHtmlPipe implements PipeTransform {
  transform(value: string): string {
    const tempDiv = document.createElement('div');
    tempDiv.innerHTML = value;
    return tempDiv.textContent || tempDiv.innerText || '';
  }
}

在HTML中使用管道：

<a [title]="value | decodeHtml"></a>

或在组件中定义方法：

decodeHtml(value: string): string {
  const tempDiv = document.createElement('div');
  tempDiv.innerHTML = value;
  return tempDiv.textContent || tempDiv.innerText || '';
}

HTML中调用方法：

<a [title]="decodeHtml(value)"></a>

方案2：直接使用Unicode字符

如果知道特殊字符的Unicode编码，直接在字符串中写入对应字符，无需解码：

// ©的Unicode是U+00A9，直接写字符即可
value = '©';

原因说明

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

如何在Angular的HTML标签title属性中显示特殊字符？

代码示例 #