Angular HTML模板插入Emoji显示空白方块问题求助

问题 #

在普通HTML文件中使用😶、😶这类Emoji实体编码可以正常显示，但将相同代码放到Angular组件模板里时，Emoji变成了空白方块。

用到的代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Example Page</title>
</head>
<body>
<p style="font-weight:600"> &#128566; &#x1F636;</p>
</body>
</html>

解决方法 #

1. 直接使用Emoji字符替换实体编码 #

Angular模板默认不会自动解析HTML实体编码，直接写入Emoji字符即可正常渲染：

<p style="font-weight:600"> 😦 😶</p>

注意确保你的组件文件以UTF-8编码保存（主流IDE默认都支持）。

2. 通过[innerHTML]绑定解析实体编码 #

如果必须保留实体编码格式，使用Angular的属性绑定让内容被当作HTML解析：

<p style="font-weight:600" [innerHTML]="'&#128566; &#x1F636;'"></p>

这种方式会触发Angular的HTML解析器，将实体编码转换为对应的Emoji字符。

3. 确认项目字符编码配置 #

检查项目根目录的index.html，确保已正确设置UTF-8字符集：

<meta charset="UTF-8">

该标签是确保字符正确渲染的基础，避免构建过程中被意外修改。

内容的提问来源于stack exchange，提问作者Oleg Fedyshyn