ngx-emoji-mart backgroundImageFn 指令

Question

我正在使用带有 Angular 6 的 ngx-emoji-mart，我正在尝试使用 backgroundImageFn 指令在本地加载表情符号表，因为 ngx-emoji-mart 的文档是这样说的：

<emoji-mart
[backgroundImageFn]="((set,sheetsize)=> 'emoji-picker.png'")"
>
</emoji-mart>

但是语法错误，所以我尝试在我的ts中这样做

   @Input()
        backgroundImageFn: Emoji['backgroundImageFn'] = 
                           (set: 'emojione', sheetSize: 20,) => { `emoji-picker.png` }

然后重试

 <emoji-mart
    [backgroundImageFn]="backgroundImageFn"
    >
 </emoji-mart>

没有任何变化，表情符号选择器仍然从 unpkj.com 加载工作表，而不是从我的本地主机加载。我浏览了这个库，看看如何覆盖这个函数并停止调用 unpkj.com。

export interface Emoji {
   ...
   ...
    backgroundImageFn: (set: string, sheetSize: Emoji['sheetSize']) => string;
   ...
   ...
}

有什么想法吗？

Answer 1

1. 导入接口：

   import { Emoji } from '@ctrl/ngx-emoji-mart/ngx-emoji/emoji.component'

2. 在你的代码后面实现接口：

   public backgroundImage: Emoji['backgroundImageFn'] = (set: string, sheetSize: number) => this.yourImg;

3. 把它放在你的容器里：

   <emoji-mart [backgroundImageFn]="backgroundImage"> </emoji-mart>