Angular绑定中的Unicode字符

Question

关于如何在Angular绑定中显示Unicode字符代码有一些答案，但是我试图动态显示一个字符，一切似乎都失败了。

我有一个接收字符代码作为@Input参数的组件。

<my-component [icon]="e901"></my-component>

该组件随后尝试显示它，但这些都不起作用：

<i>{{ "\u" + icon  }}</i>
<i [innerHTML]="'\u' + icon"</i>
<i [innerHTML]="`\u${icon}`"</i>
<i [innerHTML]="'&#' + icon + ';'"</i>

使用该语法有很多余地，但是它总是导致错误，或者只是将\ue901显示为字符串。如果我对代码进行硬编码，它确实可以工作：

<i>{{ "\ue901" }}</i>

是否在模板或TypeScript中生成字符串都没有关系。如果我尝试将整个代码作为参数传递，那将不起作用。大家有什么想法吗？

Answer 1

实际上是不可能的，因为您必须使用Angular访问伪元素才能实现想要的目标。

也许这个answer会给您一些提示。

Answer 2

JGFMK指出答案的一半后，以下是解决方法：

在代码中：

this.icon = '&#x' + this.icon + ';';

然后在模板中：

<span [innerHTML]="icon"></span>

Answer 3

您也可以使用HTML代码，在这里您可以搜索https://www.rapidtables.com/web/html/html-codes.html

希望有帮助