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

Posted 2023-03-05

【中文标题】如何在角度/离子应用程序中显示表情符号

【英文标题】：How to show emoji in angular/ionic app

【发布时间】：2018-06-11 15:39:21

【问题描述】：

在我使用 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

【参考方案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 字符。所以这不是消毒剂的问题。

【讨论】：

我不确定它是否与字体有关，我创建了一个具有相同标签的简单 html 文件并且它可以正确呈现，您仍然建议尝试字体吗？

我创建了一个带有相同标签的简单 html 文件，它可以正确呈现 - 嗯... 你还建议尝试字体吗？ - 很好这不会伤害:)

您使用 HTML 代码作为 emoji 的特殊原因，而不是仅仅放置一个 ? 字符？

好点，我只是复制粘贴它就可以了，我如何复制粘贴其他的？