使用Angular 在html我需要在<a>标签上添加title个属性,标题的值将有文本和特殊字符.该属性应该在锚上呈现工具提示,但它不呈现特殊字符,而是将它们作为文本来呈现.

超文本标记语言

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

TS

value= '&copy;';

    constructor(private sanitizer: DomSanitizer) {}

    getSanitizedContent(value: string): void {
       return this.sanitizer.bypassSecurityTrustHtml(value);
    }
  • 如果我使用消毒剂,我会在工具提示safevalue must use [property]=binding:'&copy;'中收到以下消息
  • 如果我在工具提示中使用直接值,我将获得特殊字符的文本,而不是呈现的图标
  • 如果我对它们进行硬件编码,我可以在工具提示中看到呈现良好的特殊字符(这意味着编码是正确的,但绑定会产生问题)

有人知道如何使用标题属性显示工具提示中的特殊字符吗?

推荐答案

DomSanitizer中的bypassSecurityTrustHtml方法旨在与[innerHTML]绑定一起使用,而不是属性绑定.它告诉ANGLE要信任HTML内容,而不是清理它,我相信这就是为什么你会看到

SafeValue必须使用[Property]=绑定消息.

因此,要解决这个问题,您可以改用JS HTMLElement,例如

getSanitizedContent(value: string){
    const txt = document.createElement('textarea');
    txt.innerHTML = value;
    return txt.value;
}

Angular相关问答推荐

angular:从模板中的可观察数组获取随机元素

有没有其他代码可以用函数的方式写成Angular ?

使用Angular 13的NgxPrinterService打印时,第二页上的空白区域

以Angular 动态添加和删除组件形状元素

使用`UrlHandlingStrategy`更改位置

Ngrx Select 器返回部分对象

如何将表单作为Angular 分量输入传递?

除非将 signal.set 作为间隔的一部分调用,否则Angular 信号效果不会执行

JsPDF Autotable 将图像添加到列中出现错误:属性getElementsByTagName不存在

Angular 无法从后端获取数据到前端

将 html ngModel 值传递给服务Angular

如何在 Angular 5 HttpInterceptor 中添加多个标头

Angular [disabled]="MyBoolean" 没有工作

如何在angular material中使用输入类型文件

visibility:hidden

Angular 2 - 组件内的 formControlName

NG 测试中的调试测试

实现autocomplete功能

有条件地将 RouterLink 或其他属性指令添加到 Angular 2 中的元素

如何在 Angular 2 中链接 HTTP 调用?