时间戳

首页 > 解决方案 > Angular 绑定中的 Unicode 字符

javascript - Angular 绑定中的 Unicode 字符

问题描述

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

标签： javascriptangulartypescriptunicode

解决方案

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

在代码中：

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

然后在模板中：

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

推荐阅读