Question

我们正在使用此库https://github.com/ahkohd/ngx-emoji-picker 在我们的聊天中实现表情符号。问题是，当您从选择器中选择表情符号时，它会立即发送消息，并且不允许继续键入消息并单击发送按钮。这是代码：

SendMessage() {
    if (this.message) {
      console.log('ts', this.receiverData.username);
      this.msgService
        .SendMessage(this.user._id, this.receiverData._id, this.receiverData.username, this.message)
        .subscribe(data => {
          this.socket.emit('refresh', {});
          this.message = '';
        });
    }
  }

  handleSelection(event) {
    console.log(event.char);
    this.message += event.char;
  }

HTML

 <div class="message-input">
            <div class="wrap">
                <div class="colinput">
                    <input [(ngModel)]="message" [ngModelOptions]="{standalone: true}"
                        (keypress)="IsTyping()" type="text" placeholder="Write your message..." />
                </div>
                <i class='attachment'
                (click)="toggled = !toggled"
                [(emojiPickerIf)]="toggled"
                [emojiPickerDirection]="'top'"
                (emojiPickerSelect)="handleSelection($event)"></i>
                <button class="submit"><i class="fa fa-paper-plane" aria-hidden="true"></i></button>
            </div>
        </div>

什么原因可能导致这种问题？如何解决？

Answer 1

如果在表单标签中使用了（ngSubmit）=“ SendMessage（）”，则在该表单中单击任何按钮都会调用SendMessage方法，这可能是您遇到的问题。避免这种情况的一种方法是在发送按钮

Answer 2

class component_name implements OnInit, OnDestroy, AfterContentChecked {
  ngAfterContentChecked(): void {
    const elements: any = document.getElementsByClassName('emoji-button');
    if (elements.length > 0) {
      // tslint:disable-next-line: prefer-for-of
      for (let i = 0; i < elements.length; i++) {
          const type = 'type';
          elements[i][type] = 'button';
      }
    }
  }
}

当选择表情符号消息立即发送而不是等待单击发送按钮时

2 个答案: