html 如何将表情符号选择器添加到Angular应用程序(Angular 12)

ttygqcqt  于 2022-12-16  发布在  Angular
关注(0)|答案(1)|浏览(149)

我创建了一个应用程序克隆Instagram来学习Angular 。我想添加一个按钮,而点击将显示一个弹出窗口,其中包含图标列表中使用的评论。

llew8vvj

llew8vvj1#

我自己找到了解决办法。

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

和typeScript文件添加此

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

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

相关问题