javascript - Unicode-tegn i Angular-binding

Det finnes noen svar på hvordan man viser Unicode-tegnkoder i Angular-bindinger, men jeg prøver å vise én dynamisk og alt ser ut til å feile.

Jeg har en komponent som mottar en tegnkode som en @Input-parameter.

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

Komponenten forsøker deretter å vise det, men ingen av disse fungerer:

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

Det er mye rom for å leke med syntaksen, men det resulterer alltid enten i en feil eller bare viser \ue901 som en streng. Det fungerer derimot hvis jeg hardkoder koden:

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

Det spiller ingen rolle om jeg genererer strengen i malen eller TypeScript. Det fungerer ikke hvis jeg prøver å sende hele koden som en parameter. Noen ideer, folkens?

Svar #1

Etter at JGFMK påpekte halve svaret, her er løsningen:

I koden:

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

Deretter i malen:

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

Svar #2

Du kan også bruke HTML-kode, her kan du søke etter det https://www.rapidtables.com/web/html/html-codes.html

Håp hjelper

Relaterte artikler