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

Question

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

所以我使用了类似的东西
<span>&#x1F601;</span>
但在渲染时，它将显示为空方块。

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

我认为这可能与 sanitizer 有关，所以我在管道下方创建了

@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 + '&#x1F601;') | safeHtml"></span>它仍然会破裂。我收到了 😁和 U+F601特点。所以这不是 sanitizer 的问题。