0
votes

Impossible d'afficher les emojis avec leur unicode en Angular

Je souhaite afficher des émojis dans mon application Angular. J'ai trouvé ce https://www.w3schools.com/charsets/ref_emoji_smileys.asp qui fonctionne en html vanilla. Mais quand je l'essaie dans mon application Angular, il n'affiche que le petit rectangle pour "caractère inconnu". Mon application est en Angular 7

J'ai déjà essayé de le désinfecter, j'ai vu cela dans plusieurs problèmes comme le mien, mais cela ne fonctionne pas, et ce n'est pas vraiment du code propre de toute façon.

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

Je m'attends à avoir un emoji, et je n'ai qu'un rectangle "caractère inconnu"

typescript angular html emoji

2 commentaires

Bonjour, pour un code plus propre, créez une directive personnalisée qui gère les caractères emoji

oui mais c'était juste pour essayer. Je ferai du code plus propre quand j'aurai du code fonctionnel ... Une idée?

3 Réponses :

0
votes

Donc, sans entrer dans les détails sur la façon dont unicode et tout va de pair avec angular vs html afin que vous puissiez simplement commencer à utiliser ce qui suit:

composant:

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
  }

}

directif:

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

et copiez essentiellement l' emoji de votre choix dans la colonne du navigateur afin d'être concaténé avec votre texte

ou:

créez simplement vos propres chaînes qui correspondent à l'unicode comme ceci:

composant:

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

directif:

<p emoji="ðŸ˜œ"></p>

2 commentaires

@BenoitBonavia ne le publiez pas en tant que commentaire (supprimez-le ...), mettez à jour votre question POST avec votre code directive à la place

@BenoitBonavia et en regardant votre code l'unicode 😜 vous mettez ne fonctionnera pas, vous devez utiliser un autre format comme l'exemple que j'ai montré ou simplement le faire comme le premier exemple que je vous ai donné

0
votes

J'étais également confronté au même problème, mais apparemment, si vous copiez et collez simplement l'émoticône directement dans la chaîne, elle apparaîtra dans le navigateur (comme 🌈), mais pas si je place par exemple "& # x1F308".

0 commentaires

0
votes

Je l'ai utilisé de cette façon et cela a fonctionné. : 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/
Vous pouvez copier les emojis du site Web ci-dessus directement (que j'ai inclus dans "texte: < ici >").

0 commentaires