在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中生成字符串都没有关系。如果我尝试将整个代码作为参数传递，它就无法工作。你们有什么想法吗？

- Tamás Polgár

---

不确定这是否有帮助。https://www.w3.org/TR/xml-entity-names/bycodes.html 是这个吗？http://www.codetable.net/decimal/901 - JGFMK

不好意思，它没有。 - Tamás Polgár

{{"R\u901"}} 的翻译是什么？ - JGFMK

让我知道它是否同样适用于[icon]的绑定。这可能会更困难，因为当你使用΅时，它是正常的HTML语法。 - JGFMK

我已经发布了答案，谢谢！ - Tamás Polgár

Answer 1

JGFMK指出了一半的答案，在这里是解决方案：

在代码中：

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

然后在模板中：

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

- Tamás Polgár

Answer 2

.ts 文件

icon = "\u{1F601}";

HTML文件

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

- Gvs Akhil

Answer 3

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

希望能帮到您

- PatricioS

Answer 4

实际上这是不可能的，因为你必须使用Angular访问伪元素才能实现你想要的效果。

也许这个答案会给你一些提示。

- ahbon