这个例子中的 this.emoji 是什么？

Question

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

1. 下面代码中的“this.emoji”是什么以及如何初始化它？？

2. 我认为这是在 div 中显示所选表情符号的解决方案，但是如何在输入字段中显示表情符号带肤色？

3. 如何使用表情符号保存我的聊天记录？

假设用户正在输入字段“Hi John !!，你好吗？”那么我在数据库中保存的最终文本应该是什么？当用户想要查看他的聊天记录时，我将如何正确呈现它？ 如果我这样存储我的文本：

嗨约翰！ :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 几乎总是指您定义的组件类。

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

我检查了那个 repo，是的，看起来那个代码示例就在那里，没有很好的文档或提及可注入服务。

我在 repo 中搜索了被取消的方法emoji、emojiSpriteStyles。

看起来它在EmojiService 中。只需注入该服务。