如何使用Angular 4 Emoji Picker?

时间:2018-03-25 09:34:42

标签: angular5

我是Angular5的新手,所以我开始创建一个演示项目,在这个项目中,他们将是一个表单,其中一个输入字段是用户可以选择emojis。我按照这个链接https://github.com/lbertenasco/ng-emoji-picker但问题是我面对的是我的inpute字段不显示表情符号选择器。       我的 notification.module.ts代码如下所示:

  import { NgModule } from '@angular/core';

  import {EmojiPickerModule} from 'ng-emoji-picker';

  import { NotificationComponent } from 
  './components/notification.component';




 @NgModule({
declarations: [
    NotificationComponent
],
providers: [
],
imports: [


    EmojiPickerModule,
 ]
 })
  export class NotificationsModule { }

我的 notification.component.html 代码如下所示:

<div>
  <div fxLayout="row">
   <div fxFlex="80" fxFlexOffset="10">
    <mat-card>
      <mat-card-title fxLayout="row">
        <div class="padding-top-10 padding-right-
     15">Notifications</div>
      </mat-card-title>
       <mat-card-content>
      <form id="mainForm" name="mainForm" fxLayout="row" fxLayoutWrap 
      novalidate [formGroup]="notificationForm" 
       (submit)="submitInst()">
     <emoji-input></emoji-input>
    </mat-card-content>
  </mat-card>
</div>

问题:当我运行命令服务时,我只能看到输入字段,但没有表情符号选择器。可以告诉我哪里出错了吗?

1 个答案:

答案 0 :(得分:0)

您在notification.component.html文件中缺少表情符号输入。 将此添加为表情符号输入

<emoji-input [(model)]="bindedVariable" [textArea]="{cols: 40, rows: 5 [onEnter]="onEnterFunction" [popupAnchor]="'bottom' (setPopupAction)="setPopupAction($event)"> </emoji-input>

并将以下内容添加到导出类内的 notification.component.ts 文件中。

 public openPopup: Function;

setPopupAction(fn: any) {
    this.openPopup = fn;
}