Символы Юникода в угловой привязке

Question

Есть несколько ответов о том, как отображать коды символов Юникода в угловых привязках, но я пытаюсь отобразить один из них динамически, и все кажется сбойным.

У меня есть компонент, который получает код символа в виде@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

После того, как JGFMK указал половину ответа, вот решение:

В коде:

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

Затем в шаблоне:

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

Answer 2

На самом деле это невозможно, потому что вы должны получить доступ к псевдоэлементам с Angular для того, чего хотите достичь.

Может быть, этот ответ даст вам несколько советов.