Question

我正在尝试使用名为ngx-emoji-mart的库将Emoji表情集成到我的Angular 6 Chat应用程序中

下面是我的代码

我的模板文件-chat.component.html

<div #emojiDiv class="emojiInput" contentEditable="true" [innerHTML]="input"  >
</div>
<emoji-mart (emojiClick)="addEmoji($event)"></emoji-mart>

我的组件类-chat.component.ts

import { Component, OnInit, ViewEncapsulation, ElementRef } from '@angular/core';

@Component({
  selector: 'app-chat',
  templateUrl: './chat.component.html',
  styleUrls: ['./chat.component.css'],
  encapsulation: ViewEncapsulation.None,
})


export class ChatComponent implements OnInit {

constructor() { }
ngOnInit() {

}

public addEmoji(){
    if(this.input) {
      this.input = this.input + "<ngx-emoji emoji='point_up'></ngx-emoji>";
     } else{
      this.input = "<ngx-emoji emoji='point_up'></ngx-emoji>";
     }
 }
}

但不附加到div。

还需要添加其他内容吗？预先感谢

Answer 1

npm install @ctrl/ngx-emoji-mart

import { PickerModule } from '@ctrl/ngx-emoji-mart'

在angular.json中添加样式表：

"styles": [
          "src/styles.css",
          "../node_modules/@ctrl/ngx-emoji-mart/picker.css"
        ],

添加此app.module.ts：

@NgModule({
...,
imports:      [ ..., PickerModule, ... ],
...
})

将其添加到app.component.html

<emoji-mart title="Pick your emoji…" emoji="point_up"></emoji-mart>

Hola !!

将Emoji表情集成到Angular 6聊天应用程序中

1 个答案: