创建一个按钮以从评论框中选择图标？答案

【问题标题】：How to add an Emoji Picker to Angular App (Angular 12)创建一个按钮以从评论框中选择图标？
【发布时间】：2022-09-28 19:09:32
【问题描述】：

问题特权更新我创建了一个应用程序克隆 Instagram 来学习 Angular、NodeJS。我想在评论中添加一个包含图标的按钮，但我不知道该怎么做。如果有人对库、工具等有任何想法或建议，请发表评论。谢谢！

标签： node.js angular

【解决方案1】：

我自己找到了解决方案。

 <div (keyup.enter)="postComment()" class="container_comment">
            <button (click)="isEmojiPickerVisible = !isEmojiPickerVisible;"><img src="assets/icons/smile-success-32.png"
                                                                                 width="28" height="28" alt=""></button>
            <input type="text" placeholder="Add a comment..."
                   [(ngModel)]="comment"/>
            <emoji-mart class="emoji-mart" *ngIf="isEmojiPickerVisible" (emojiSelect)="addEmoji($event)"
                        title="Choose your emoji"></emoji-mart>
          </div>

和打字稿文件添加这个

  public isEmojiPickerVisible: boolean;
  public comment: string = '';

  public addEmoji(event: { emoji: { native: any; }; }) {
    this.comment = `${this.comment}${event.emoji.native}`;
    this.isEmojiPickerVisible = false;
  }

【讨论】：