Невозможно отобразить смайлики с их юникодом в Angular

Question

Я хотел бы отобразить смайлики в моем приложении Angular.Я нашел это https://www.w3schools.com/charsets/ref_emoji_smileys.asp, который работает в HTML ванили.Но когда я пробую это в моем приложении Angular, он отображает только маленький прямоугольник для «неизвестного персонажа».Мое приложение написано на Angular 7

Я уже пытался санировать его, я видел это в нескольких проблемах, как у меня, но это не работает, и это не совсем чистый код в любом случае.

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

Я ожидаю смайликов, и у меня есть только прямоугольник "неизвестный символ"

Answer 1

Итак, не вдаваясь в подробности о том, как юникод и все идет вместе с angular vs 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 по вашему выбору из столбца браузера, чтобы объединить ваш текст

или:

просто создайте свои собственные строки, соответствующие юникоду, например:

компонент:

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

}