Question

我正在尝试这个名为ngx-emoji-mart的库，我想在输入字段中显示所选的表情符号。我正在阅读文档，发现了这一点。但是我无法找到“ this.emoji”的含义。所以我有几个问题：

下面的代码中的“ this.emoji”是什么以及如何初始化？
我认为这是在div中显示选定表情符号的解决方案，但是如何在输入字段中显示具有肤色的表情符号？
如何保存与表情符号的聊天？

可以说用户在输入字段中输入“嗨，约翰！！，你好吗？”。那么我要保存在数据库中的最终文本是什么？当用户想查看他的聊天记录时，如何正确渲染？如果我这样存储我的文本：

嗨，约翰！：slightly_smiling_face :，你好吗？

然后我将如何在div中将其与相应的表情符号一起显示？我是否需要编写任何指令来搜索“：emoji id：”之类的文本并将其替换为

<ngx-emoji emoji=':santa::skin-tone-3:' size="16"></ngx-emoji>

谢谢。

Display emoji as custom element
// $event is from (emojiClick)
const styles = this.emoji.emojiSpriteStyles($event.emoji.sheet, 'twitter'); // pass emoji sheet
const el = document.createElement('div');
Object.assign(el.style, styles); // apply styles to new element
document.body.appendChild(el);

Answer 1

this是当前上下文。分别是在上面引用了其代码的方法所调用的对象。 emoji分别是所提到对象的this的属性或属性。

示例说明：

o = { emoji: '',
      print: function() {  console.log(this.emoji); };

o.print();

Answer 2

正如@TomášPospíšek所说，this在上下文中是指“当前”对象。

在Angular中，this几乎总是引用您正在定义的组件类。

像这样的第三方捆绑包通常通过提供服务来在组件代码中提供功能。

我检查了该回购，是的，看起来该代码示例就在那儿，而没有大量文档或提及可注入服务。

我在存储库中搜索了被emoji，emojiSpriteStyles取消的方法。

好像在EmojiService中。只需注入该服务即可。

在此示例中，this.emoji是什么？

2 个答案: