Angular html 模板中的表情符号

Question

我正在尝试将表情符号插入我的 html 代码中。在纯 html 文件上它正在工作。在我的 Angular 组件上，它显示空白方块。

这是我用于普通示例和 Angular 示例的代码：

<!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>

纯文本输出：纯 html 示例 Angular 输出：Angular 示例

Answer 1

通过建造管道来净化表情符号。

@Pipe({
  name: 'sanitizeHtml',
  standalone: true,
})
export class SanitizeHtmlPipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) {}

  transform(value: string): string | null {
    return this.sanitizer.sanitize(
      SecurityContext.HTML,
      this.sanitizer.bypassSecurityTrustHtml(value)
    );
  }
}

导入

SanitizeHtmlPipe

并将管道应用到具有字符串插值的表情符号字符。

<p style="font-weight:600"> 
    {{ "&#128566;" | sanitizeHtml }} 
    {{ "&#x1F636;" | sanitizeHtml }}
</p>

演示@StackBlitz

Answer 2

嗯，所以我明白你在说什么，实际上在这种情况下添加插值确实使它们渲染，但我不完全确定为什么它们没有在没有插值环绕 em 的情况下渲染：

{{'&#128566;'}}

Angular html 模板中的表情符号

问题描述投票：0回答：2

2个回答

最新问题

Angular html 模板中的表情符号

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2