ng2-emoji-picker 是一款基于 Angular 平台开发的表情选择器组件。它可以方便地在 Angular 应用中引入，帮助用户选取各种表情符号，在几个指令的帮助下，即可实现表情的渲染并监听选择事件。下面我们将详细介绍其安装与使用方法。
安装
ng2-emoji-picker 可通过 npm 直接安装：
npm install ng2-emoji-picker
安装完成后，就可以在 Angular 项目中开始使用该组件。
使用方法
导入 EmojiPickerModule
在使用 ng2-emoji-picker 之前，需要先将其组件引入到 Angular 应用中。在 Angular 应用的需要使用 ng2-emoji-picker 的模块文件中，导入 EmojiPickerModule，并将其添加到 @NgModule 的 imports 数组中。
-- -------------------- ---- ------- ------ - ----------------- - ---- ------------------- ----------- ------------- --------------- -------- --------------- ------------------- ---------- --- ---------- -------------- -- ------ ----- --------- --
添加 EmojiPicker 指令
添加 ng2-emoji-picker 的指令后，就可以在模板中使用 EmojiPicker 来选择表情了。在你需要使用表情的元素中，添加 ng2-emoji-picker 的指令，将其绑定到一个表情变量上，如下所示：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
---- -------------
-------- -- ----- --------------
------ ----------- --------------------
------------- ---------------------------------
------
--
---------- -----------------------
--
------ ----- ------------ -
------ ------ - ---
-这里用到了 ngModel 来双向绑定表情。
注意：该表情变量必须与你在组件内部绑定的表情变量名称一致，否则将无法实现数据的传递。
详细设置
ng2-emoji-picker 还提供了一些高级用法的设置，使用户可以更好地使用表情。通过添加 provider，可更改 EmojiPicker 的使用界面，包括改变以及增加表情分类，例如：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ----------------- - ---- -------------------
------ - ------------------- - ---- -------------------
------ - ------------ - ---- ------------------
-----------
------------- ---------------
-------- --------------- -------------------
---------- -
-
-------- --------------------
--------- -
------------------- ------- -- -
-- -------------------------------------- -
------ -----
-
------ ------
-
-
--
-
-------- --------------------
--------- -
------- ------------
-
-
--
---------- --------------
--
------ ----- --------- --在这里，我们更改了 EmojiPicker 的 emojisToShowFilter 配置来只显示以 custom 开头的表情，并添加了自定义的表情。
示例代码
完整的示例代码可在以下链接中找到：
https://stackblitz.com/github/peteroliveira/ng2-emoji-picker-example
总结
ng2-emoji-picker 可帮助 Angular 用户方便地选择各种表情符号，在用户界面中实现表情渲染与监听。我们介绍了该组件的安装、使用方法及高级用法的设置，并提供了一个示例代码供读者参考。希望能帮助读者更好地使用 ng2-emoji-picker。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cd981e8991b448e67fc