Question

我的角度应用程序中的模板使用以下代码：

...
<span [innerHtml]="textVar"></span>
...

由于所需文本需要在某些字符/字符串位置上应用特殊的动态样式，因此必须对其进行格式化。使用以下代码创建textVar变量：

...
var textVar = someString.bold() + "&#160" + anotherString;
...

文本将正确显示，并带有粗体和中间的一些制表符。问题是，如果将鼠标悬停在文本上，工具提示将显示带有html标签的文本，如下所示：

<b>someString</b>&#160anotherString

但是我希望工具提示删除工具提示文本中的html标签。

我该怎么做？

Answer 1

跨度的工具提示行为由title属性控制。您可以尝试将此标题属性设置为您的 textVar 的解析值。基于this SO answer，我们可以利用DOMParser帮助我们获取已解析的html。考虑下面的简化示例：

export class AppComponent  {
  name = 'Angular';
  textVar = '<b>someString</b>&#160anotherString'

  parsedText(text) {
    const dom = new DOMParser().parseFromString(
    '<!doctype html><body>' + text,
    'text/html');
    const decodedString = dom.body.textContent;
    return decodedString;
  }
}

组件模板如下所示：

<span [title]="parsedText(textVar)" [innerHtml]="textVar"></span>

有关工作示例，请参见此Stackblitz。

Answer 2

尝试一下：

var textVar: string = `${someString.bold()} ${anotherString}`;

如果您确实需要使用HTML实体代码：“＆＃160”，请使用：

var textVar: string = `${someString.bold()}&#160${anotherString}`;

角度6：防止浏览器工具提示在“ innerHtml”中显示HTML标签

2 个答案: