如何在角度/离子应用程序中显示表情符号

Question

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

所以我使用了像

这样的东西

<span>&#x1F601;</span>

但在渲染时它会将其显示为空方格。

我的<meta charset="UTF-8">已经有index.html，html文件也保存为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>   

但结果仍然相同

我错过了什么？

Plunker

Answer 1

当您没有显示字符的字体时，通常会发生这种情况。在我的计算机上，Chrome使用Symbola字体呈现此字符。您可以从here下载。或者你可以找到另一种支持表情符号的字体。比使用@font-face

在CSS中添加字体

@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字符（a.k.a。）变为U+F601，因为您没有显示字体，所以会得到一个空方块。它看起来像Angular的模板渲染引擎中的一个错误，因为即使我做<span [innerHTML]="(someVariable + '&#x1F601;') | safeHtml"></span>它仍然会中断。我得到和U+F601字符。所以这不是消毒剂问题。