在Angular 6聊天应用程序中集成Emoji

Question

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

下面是我的代码

我的模板文件- 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> 

你好!！