如何在 Angular/ionic 应用程序中显示表情符号

Question

在我使用 angular5/ionic3 应用程序的移动应用程序中，我想显示表情符号图标。

所以我用了类似的东西

<span>&#x1F601;</span>

但在渲染时它将显示为空方块。

我已经 <meta charset="UTF-8">在我的index.htmlhtml 文件中也保存为 utf-8。

我认为这可能与消毒有关，所以我在管道下面创建了

@Pipe({
  name: 'safeHtml',
})
export class SafeHtmlPipe implements PipeTransform {
    constructor(private domSanitizer: DomSanitizer) { }
    transform(html) {
    return this.domSanitizer.bypassSecurityTrustHtml(html);
    }
}

然后我用它作为

 <span [innerHTML]="'&#x1F601;' | safeHtml"></span>   

但结果还是一样

我错过了什么？

普朗克

Answer 1

当您没有用于显示字符的字体时，通常会发生这种情况。在我的计算机上，Chrome 使用 Symbola 字体来呈现该字符。你可以在这里下载。或者您可以找到其他支持表情符号的字体。比你在CSS中添加字体使用@font-face

@font-face {
  font-family: "Symbola";
  src: url("/fonts/Symbola-Emoji.woff") format("woff"),
    url("/fonts/Symbola-Emoji.ttf") format("ttf");
}

然后你可以在 CSS 上使用这个字体class。

.emoji {
    font-family: "Symbola"
}

然后将该类添加到您的span：

<span class="emoji">&#x1F601;</span>

更新：

如果您分配😁给一个变量，然后在模板中读取它，它就可以正常工作：

<span [innerHTML]="someVariable | safeHtml"></span><!--this will work-->

但是你的代码中断了：U+1F601字符（又名）变成了U+F601，并且由于你没有字体来显示它，所以你得到一个空方块。它看起来像是 Angular 模板渲染引擎中的一个错误，因为即使我这样做<span [innerHTML]="(someVariable + '&#x1F601;') | safeHtml"></span>它仍然会崩溃。我明白了和U+F601性格。所以这不是消毒剂的问题。