无法在 Angular 中显示带有 unicode 的表情符号

Question

我想在我的 Angular 应用程序中显示表情符号。我发现这个 https://www.w3schools.com/charsets/ref_emoji_smileys.asp 在 html vanilla 中有效。但是当我在我的 Angular 应用程序中尝试它时，它只显示 "unknown character" 的小矩形。我的申请在 Angular 7

我已经尝试过清理它，我在像我这样的多个问题中看到过这个问题，但它不起作用，而且它也不是真正干净的代码。

<div class="collapse" id="collapseSmiley">
    <div class="row">
      <div class="col-md-1">{{ domSanitize.bypassSecurityTrustHtml('&#128513;') }}</div>
    </div>
  </div>

我希望有一个表情符号，但我只有一个矩形"unknown char"

Answer 1

因此，无需详细说明 unicode 和所有内容如何与 angular 和 html 结合使用，以便您开始使用以下内容：

分量：

<p emoji=""></p>

指令：

import { Directive, ElementRef, Input, OnInit } from '@angular/core';

@Directive({
  selector: '[emoji]'
})
export class EmojiDirective implements OnInit {

  @Input('emoji') emoji: string;

  constructor(private el: ElementRef) { }

  ngOnInit() {
    this.el.nativeElement.textContent += this.emoji;
  }
}

并基本上从浏览器列中复制您选择的 emoji，以便与您的文本连接

或：

只需创建您自己的与 unicode 匹配的字符串，如下所示：

分量：

<p emoji="smile"></p>

指令：

import { Directive, ElementRef, Input, OnInit } from '@angular/core';

@Directive({
  selector: '[emoji]'
})
export class EmojiDirective implements OnInit {

  @Input('emoji') emoji: string;

  constructor(private el: ElementRef) { }

  ngOnInit() {
    this.el.nativeElement.textContent += this.getEmoji(this.emoji);
  }

  getEmoji(uniEmoji: string) {
    let emoji: string;
    switch(uniEmoji){
      case 'smile': emoji = '\uD83D\uDE42'
    }

    return emoji
  }

}

Answer 2

我也遇到了同样的问题，但显然，如果您只是将表情符号直接复制并粘贴到字符串中，它将显示在浏览器中（如），但如果我放置例如“🌈 ".

Answer 3

我就是这样用的，效果不错。 :p

import Swal from 'sweetalert2';
   
   Swal.fire({
      title: 'Logout Successful',
      text: '',
      icon: 'success',
      allowOutsideClick: false,
      showCancelButton: false
    })

https://html-css-js.com/html/character-codes/
You can copy the emojis from above website directly(which I included in "text: <here>").

无法在 Angular 中显示带有 unicode 的表情符号

Impossible to display emojis with their unicode in Angular

html

emoji

typescript

angular