Html 如何使输入字段或文本区域与表情选择器在角度？

new-status.component.ts

<mat-form-field>
  <textarea matInput placeholder="Status Content" style="height: 200px;"></textarea>
  <emoji-mart title="Pick your emoji…" emoji="point_up"></emoji-mart>
</mat-form-field>

addEmoji($event){
  let data = this.emojiForm.get('inputField');
  data.patchValue(data.value + $event.emoji.native)
}

下面是solution（）的链接，现在我想将表情选择器放在输入字段或文本区域。

让我们从

npm install @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>  

就这样：-）

编辑

有一个原始的方法，你需要改变你的尺寸

您有一个文本区域按钮，可以在文本中添加表情符号

让我知道这是否是一个好的开始方式：-）

然后在你的模块中

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

在styles.scss中添加其样式

@import '~@ctrl/ngx-emoji-mart/picker';

在component.html中

<form [formGroup]="emojiForm">
   <emoji-mart (emojiClick)="addEmoji($event)" emoji="point_up"></emoji-mart>
   <textarea type="text" formControlName="inputField"></textarea>
</form>

---

我知道很晚了，但也许其他人可以用

我已经改进了这些可用的解决方案。 表情符号应该插入胡萝卜的位置，我们应该能够撤销，重做的消息框 这是解决办法

HTML

---

链接指向其他一些问题陈述。请提供最新的链接。表情符号和输入请提供更新的链接。链接指向了与问题无关的地方。我在StackBlitz上找到了这个示例（angular 8和ngx emoji mart 1.0.8，但在最新版本中工作相同）：@CirrusMinor我使用了与您共享的示例链接相同的emoji mart库，拾取程序在没有任何表情的情况下打开，几秒钟后崩溃。。。你知道为什么会这样吗？

<form [formGroup]="emojiForm">
   <emoji-mart (emojiClick)="addEmoji($event)" emoji="point_up"></emoji-mart>
   <textarea type="text" formControlName="inputField"></textarea>
</form>

addEmoji($event){
  let data = this.emojiForm.get('inputField');
  data.patchValue(data.value + $event.emoji.native)
}

 <textarea #input [formControl]="message" (keydown.enter)="send()"> </textarea>
    
    <emoji-mart
       title="Pick your emoji…"
       (emojiSelect)="addEmoji($event)"
       [hideObsolete]="true"
       [isNative]="true">
    </emoji-mart>

    addEmoji(selected: Emoji) {
            const emoji: string = (selected.emoji as any).native;
            const input = this.input.nativeElement;
            input.focus();
        
            if (document.execCommand){ // document.execCommand is absolute but it //add support for undo redo and insert emoji at carrot position
//any one has better solution ?
    
              var event = new Event('input');
              document.execCommand('insertText', false, emoji);
              return; 
            }
               // insert emoji on carrot position
            const [start, end] = [input.selectionStart, input.selectionEnd]; 
            input.setRangeText(emoji, start, end, 'end');
          }