1、效果演示:
2、安装扩展包依赖
npm i @ionic-tools/emoji-picker --save
3、app.module.ts中导入插件
import { EmojiPickerModule } from '@ionic-tools/emoji-picker'; @NgModule({
...
imports: [
...
EmojiPickerModule.forRoot()
],
...
})
export class AppModule {}
4、详情页使用:
import { EmojiPickerModule } from '@ionic-tools/emoji-picker'; @NgModule({
...
imports: [
...
EmojiPickerModule
],
...
})
export class SharedModule {
public toggled: boolean = false;
public emojitext: string;
//切换当前选中的emoje表情
public handleSelection(event) {
this.emojitext = this.emojitext + " " + event.char;
} }
5、html中调用:
<ion-textarea [(ngModel)]="emojitext"></ion-textarea> <button ion-button clear icon-only (click)="toggled = !toggled" [(emojiPickerIf)]="toggled" [emojiPickerDirection]="'top'"
(emojiPickerSelect)="handleSelection($event)">