Angular5中ng-emoji-picker无法显示表情选择器问题求助

先别急，作为Angular新手遇到这种组件不生效的情况太正常了，我帮你梳理了几个核心排查点，你可以跟着一步步来：

1. 确认模块导入是否完整 #

你贴的notification.module.ts代码没写完，首先得确保EmojiPickerModule不仅导入，还要在@NgModule的imports数组里声明，另外表单相关模块也必须加——毕竟你是在表单里用这个组件：

import { NgModule } from '@angular/core';
import { EmojiPickerModule } from 'ng-emoji-picker';
import { NotificationComponent } from './components/notification.component';
// 根据你的表单类型二选一，或者都加
import { FormsModule } from '@angular/forms';
import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  declarations: [NotificationComponent],
  imports: [
    EmojiPickerModule,
    FormsModule, // 模板驱动表单必备
    ReactiveFormsModule // 响应式表单必备
  ]
})
export class NotificationModule { }

2. 检查组件模板与类的写法是否正确 #

这个表情选择器需要特定的绑定逻辑，不是随便加个标签就行的，给你个可直接参考的示例：

组件模板（notification.component.html） #

<div class="emoji-input-wrap">
  <!-- 绑定表情选择器的专属双向绑定 -->
  <input type="text" [(emojiPickerModel)]="inputValue" placeholder="输入内容...">
  <!-- 触发选择器的按钮 -->
  <button (click)="togglePicker($event)">😀</button>
  <!-- 表情选择器本体 -->
  <emoji-picker
    [hidden]="!showPicker"
    (emojiClick)="onEmojiSelect($event)"
  ></emoji-picker>
</div>

组件类（notification.component.ts） #

import { Component } from '@angular/core';
import { EmojiPickerService } from 'ng-emoji-picker';

@Component({
  selector: 'app-notification',
  templateUrl: './notification.component.html'
})
export class NotificationComponent {
  inputValue = '';
  showPicker = false;

  // 必须注入服务来辅助控制选择器
  constructor(private emojiService: EmojiPickerService) {}

  togglePicker(event: Event) {
    // 阻止事件冒泡，避免选择器意外关闭
    event.stopPropagation();
    this.showPicker = !this.showPicker;
  }

  onEmojiSelect(event: { emoji: string }) {
    // 把选中的表情插入输入框
    this.inputValue += event.emoji;
    // 选完自动关闭选择器
    this.showPicker = false;
  }
}

3. 检查依赖版本是否兼容Angular5 #

Angular5是比较老的版本，高版本的ng-emoji-picker可能只支持Angular6+，你可以先看package.json里的版本号，建议安装1.0.0左右的兼容版本：

npm uninstall ng-emoji-picker
npm install ng-emoji-picker@1.0.0 --save

4. 确认全局样式是否引入 #

这个组件需要自带的样式才能正常显示，你可以在项目根目录的styles.css里添加：

@import "~ng-emoji-picker/assets/css/emoji-picker.css";

如果没加这行，可能会出现选择器样式错乱甚至完全不显示的情况。

5. 排除样式冲突问题 #

有时候父组件的overflow: hidden、display: none或者自定义指令会把表情选择器遮住，你可以先把输入框和选择器放在一个独立的容器里，暂时去掉其他自定义样式，验证是否是样式冲突导致的。

你可以从第一步开始排查，先确认模块导入没问题，再逐步验证后面的步骤，应该就能解决啦！

内容的提问来源于stack exchange，提问作者Jas mas