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

Question

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

所以我用了类似的东西

<span>😁</span>

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

我的index.html 中已经有<meta charset="UTF-8"> 并且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 字符（又名?）变成了U+F601，并且由于您没有显示它的字体，因此您会得到一个空方块。它看起来像 Angular 的模板渲染引擎中的一个错误，因为即使我这样做 <span [innerHTML]="(someVariable + '😁') | safeHtml"></span> 它仍然会中断。我得到? 和U+F601 字符。所以这不是消毒剂的问题。