如何在 ionic 3 聊天應用程序中發送和接收表情符號圖標？

Question

我正在使用https://github.com/HsuanXyz/ionic3-chat這個鏈接。 一切都很好，但我無法在聊天對話屏幕上發送和接收表情符號。我無法發送和接收表情符號圖標，我收到 ???? 當我發送任何表情符號時。 可以看到下圖：

我的 .html 代碼在這里：

<ion-footer no-border [style.height]="showEmojiPicker ? '255px' : '55px'">
 <div class="input-wrap">
  <button ion-button clear icon-only item-right (click)="switchEmojiPicker()">
   <ion-icon name="md-happy"></ion-icon>
  </button>

  <textarea class="textMsg" #chat_input
          placeholder="Type a message"
          [(ngModel)]="editorMsg"
          (keyup.enter)="sendMsg()"
          (focusin)="onFocus()">
  </textarea>
  <button ion-button clear icon-only item-right (click)="sendMsg()">
   <ion-icon name="ios-send" ios="ios-send" md="md-send"></ion-icon>
  </button>
 </div>
 <emoji-picker [(ngModel)]="editorMsg"></emoji-picker>
</ion-footer>

.ts 文件代碼：

import { Component, ElementRef, ViewChild } from '@angular/core';
import { IonicPage, NavController, NavParams, AlertController } from 'ionic-angular';
import { Events, Content } from 'ionic-angular';
// import { ChatService, ChatMessage, UserInfo } from "../../providers/chat-service";
import * as moment from 'moment';
import { ServiceProvider } from '../../providers/service/service';
import { Storage } from "@ionic/storage";
import { Loader } from "../../providers/loader/loader";
// import { EmojiPickerComponentModule } from "../../components/emoji- picker/emoji-picker.module";


@IonicPage()
@Component({
 selector: 'page-conversationchat',
 templateUrl: 'conversationchat.html',
})

export class ConversationchatPage {
 // selectedImojiPickerIten: EmojiPickerItem;
 @ViewChild(Content) content: Content;
 @ViewChild('chat_input') messageInput: ElementRef;

 msgList: any[] = [];
 // user: UserInfo;
 // toUser: UserInfo;
 editorMsg = '';
 showEmojiPicker = false;
 userId : any;
 sessionId: any;
 conversationData: any;

 receiverPic: any;
 receiverName: any;
 receiverId: any;
 conversationId: any;

 chatType: any;
 messages: any;

 // toggled: boolean = false;
 // emojitext: string;

 constructor(public navCtrl: NavController, public navParams: 
  NavParams, private loader: Loader, private alertCtrl: 
  AlertController, private events: Events, public serviceProvider: 
   ServiceProvider, private storage: Storage) {

  }

  ionViewDidLoad() {
   console.log('ionViewDidLoad ConversationchatPage');
  }
  ionViewWillEnter() {
   this.storage.get("userData").then(userData => {
   // console.log("user profile data" +JSON.stringify(userData));
   this.userId = userData.data.User_Id;
   this.sessionId = userData.data.Session_Id;
  });

  this.storage.get("conversationData").then(conversationData => {
   // console.log("conversationData" 
   +JSON.stringify(conversationData));

   if(conversationData.Receiver_ProfilePic == "") {
    this.receiverPic = "assets/imgs/profileuser.png";
   } else {
    this.receiverPic = conversationData.Receiver_ProfilePic;
   }
   this.receiverName = conversationData.Receiver_Name;
   this.receiverId = conversationData.Receiver_Id;
   this.conversationId = conversationData.Converstion_Id;
  });

  this.storage.get("chatType").then(chatType => {
   this.chatType = chatType;
  });
  this.getMsg();
}
goBack() {
 this.navCtrl.pop();
}

ionViewWillLeave() {
 // unsubscribe
 this.events.unsubscribe('chat:received');
}

ionViewDidEnter() {
 //get message list
 this.getMsg();

 // Subscribe to received  new message events
 this.events.subscribe('chat:received', msg => {
  this.pushNewMsg(msg);
 })
}

onFocus() {
 this.showEmojiPicker = false;
 this.content.resize();
 this.scrollToBottom();
}

switchEmojiPicker() {
 this.showEmojiPicker = !this.showEmojiPicker;
 if (!this.showEmojiPicker) {
  this.focus();
 } else {
  this.setTextareaScroll();
 }
 this.content.resize();
 this.scrollToBottom();
}


getMsg() {

 let getConversionMsgObj = {
  "User_Id": this.userId,
  "sessionId": this.sessionId,
  "Chat_Message": this.editorMsg,
  "Chat_Id": this.receiverId,
  "Chat_Type": this.chatType
 }


this.serviceProvider.chatHistoryApi(getConversionMsgObj).then((result) => {
  // console.log("result Conversation chat history" 
   +JSON.stringify(result));
   if(result["success"] == 1) {
    // this.loader.hide();
    this.msgList = result["data"].ChatHistory;
    // console.log("this.msgList", this.msgList);
    for(let msgUserImage of this.msgList){
      // console.log("msgUserImage", msgUserImage);
      if(msgUserImage.User_ProfilePic == "") {
        msgUserImage.User_ProfilePic = "assets/imgs/profileuser.png";
      }
      if(msgUserImage.Chat_Time) {
        // var now = moment();
        msgUserImage.Chat_Time = moment.utc(msgUserImage.Chat_Time); 
      }


    }

    this.scrollToBottom();

   } else if(result["success"] == 4) {
    // this.loader.hide();
    let alert = this.alertCtrl.create({
      subTitle: result["message"],
      buttons: [
        {
          text: 'OK',
          handler: () => {
            console.log('ok clicked');
            this.navCtrl.push("SigninPage");
          }
        }
      ]
    });
    alert.present();

   }  else if(result["success"] == 0) {
    // this.loader.hide();

   } else {

   }
 }, (err) => {
  // this.loader.hide();
  console.log("err profile" +JSON.stringify(err));
  // Error log
 });
}


sendMsg() {
if (!this.editorMsg.trim()) return;

// Mock message
const id = Date.now().toString();
let chatMsg = {

  "User_Id": this.userId,
  "sessionId": this.sessionId,
  "Chat_Message": this.editorMsg,
  "Chat_Id": this.conversationId,
  "Chat_Type": this.chatType

};

this.pushNewMsg(chatMsg);
this.editorMsg = '';

if (!this.showEmojiPicker) {
  this.focus();
}
// console.log("chatMsg", chatMsg);
this.serviceProvider.sendMessageApi(chatMsg).then((result) => {
  // console.log("result profile" +JSON.stringify(result));
  if(result["success"] == 1) {
    this.scrollToBottom();
    this.getMsg();
    // let index = this.getMsgIndexById(id);
    // if (index !== -1) {
    //   this.msgList[index].status = 'success';
    // }
  } else if(result["success"] == 4) {
    this.loader.hide();
    let alert = this.alertCtrl.create({
      subTitle: result["message"],
      buttons: [
        {
          text: 'OK',
          handler: () => {
            console.log('ok clicked');
            this.navCtrl.push("SigninPage");
          }
        }
      ]
    });
    alert.present();
   } else {

  }
 }, (err) => {
  // this.loader.hide();
  console.log("err profile" +JSON.stringify(err));
  // Error log
 });


}


pushNewMsg(msg) {
 // console.log("msg pushMsg", msg);
 const userId = this.userId,
  toUserId = this.receiverId;
 // Verify user relationships
 if (msg.User_Id === userId && msg.Chat_Id === toUserId) {
  this.msgList.push(msg);
 } else if (msg.Chat_Id === userId && msg.User_Id === toUserId) {
  this.msgList.push(msg);
 }
 this.scrollToBottom();
}

getMsgIndexById(id: string) {
 return this.msgList.findIndex(e => e.messageId === id)
}

scrollToBottom() {
 setTimeout(() => {
  if (this.content.scrollToBottom) {
    this.content.scrollToBottom();
  }
 }, 400)
}

private focus() {
 if (this.messageInput && this.messageInput.nativeElement) {
  this.messageInput.nativeElement.focus();
 }
}

private setTextareaScroll() {
 const textarea =this.messageInput.nativeElement;
 textarea.scrollTop = textarea.scrollHeight;
}

}

如何解決這個問題，我需要盡快解決。

Answer 1

檢查這個很棒的插件 -表情符號

Answer 2

我為 Ionic 4 和 Ionic 5 創建了一個 npm 包。https://github.com/Pankaj-Sati/ionic4-emoji-picker 。 特征：

1. 類似滑塊的界面（如 WhatsApp 和任何其他聊天應用程序）
2. 模態支持。 在模態中打開表情符號選擇器
3. 輕松造型