# @ctrl/ngx-emoji-mart 中文文档 规范地址：https://npmcn.com/package/%40ctrl/ngx-emoji-mart/ 版本：9\.3\.0 npm 元数据更新时间：2025-09-16T07:30:56.550Z 中文译文更新时间：2026-11-11T03:49:18.716Z 软件包许可：MIT 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40ctrl/ngx-emoji-mart 原文对照：https://npmcn.com/package/%40ctrl/ngx-emoji-mart/?lang=original 项目主页：https://ngx-emoji-mart.vercel.app/ 源码仓库：https://github.com/scttcper/ngx-emoji-mart ## 关键信息（来自 npm 元数据） - 包体积（解压后）：5 MB，51 个文件 - 模块格式：ES Module - TypeScript 类型：包内自带 - 运行依赖：1 个 - peer 依赖：@angular/core \>=15\.0\.0-0 - 首次发布：2018-02-10T19:40:19.492Z - 最新版本发布：2025-09-16T07:30:56.114Z - 近 30 天下载量：396908（2026-10-11 至 2026-11-09，npm 官方下载统计） - 已发布版本数：85（近 12 个月 0 个） ## 中文简介 自定义类似Angular 的 lack- emoji 拾取器 ## 安装 ```sh npm install @ctrl/ngx-emoji-mart ``` 也可以使用：`pnpm add @ctrl/ngx-emoji-mart`、`yarn add @ctrl/ngx-emoji-mart`、`bun add @ctrl/ngx-emoji-mart` ## README ![](https://raw.githubusercontent.com/scttcper/ngx-emoji-mart/master/misc/preview.png) # ngx-emoji-mart (英语) [![npm](https://badge.fury.io/js/%40ctrl%2Fngx-emoji-mart.svg)](https://www.npmjs.org/package/@ctrl/ngx-emoji-mart) **德莫尔**数字 : [https://ngx-emoji-mart.vercel.app. 互联网档案馆的存檔,存档日期2014-12-22](https://ngx-emoji-mart.vercel.app/) 这个项目是 [爱莫吉玛特](https://github.com/missive/emoji-mart) 被误入歧途. ## 安装 ```sh npm install @ctrl/ngx-emoji-mart # Or if you're using yarn yarn add @ctrl/ngx-emoji-mart # Or if you're using pnpm pnpm install @ctrl/ngx-emoji-mart ``` ## 依赖关系 每个版本的最新版本 | @ctrl/ngx-emoji-mart (英语) | 角质 | | --- | --- | | 1.0.6 (中文(简体) ) | 8.x 电话 | | 3.1.0 (中文(简体) ) | 9.x (中文(简体) ) | | 5.1.2 (中文(简体) ) | 10.x 11.x (英语) | | 6.2.0 (单位:千美元) | 12.x 13.x (中文(简体) ) | | 7.1.0 (中文(简体) ) | 14.x (中文(简体) ) | | 8.2.0 (中文(简体) ) | 15.x (中文(简体) ) | | 当前 | 页:1 | ## 构成部分 ### 拾取器 添加 `PickerComponent` 输入模块 ```ts import { PickerComponent } from '@ctrl/ngx-emoji-mart'; @NgModule({ imports: [PickerComponent], }) export class AppModule {} // Or if using standalone components @Component({ standalone: true, imports: [PickerComponent], }) export class AppComponent {} ``` 导入样式 `styles.scss`数字 : ```scss @import '@ctrl/ngx-emoji-mart/picker'; ``` 或者把这些风格包起来 `angular.json` 配置 : ```json "build": { "options": { "styles": [ "src/styles.scss", "node_modules/@ctrl/ngx-emoji-mart/picker.css" ] } } ``` 现在我们可以使用 `emoji-mart` 组件 : ```html ``` | Prop | 默认 | 说明 | | --- | --- | --- | | **自动聚焦** | `false` | 挂载时自动聚焦搜索输入 | | **颜色** | `#ae65c5` | 顶端栏杆选择并徘徊颜色 | | **爱莫吉** | `department_store` | 当没有emojis被徘徊时, emoji 显示, 设置为空字符串以显示什么 | | **暗号** | `varies` | 暗模式 (boolean). 如果浏览器报告默认为真 [更喜欢- 彩色- 策略: 黑暗 .](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) | | **包含** | `[]` | 只有负载包括类别。 接受 [I18n 键类](https://npmcn.com/package/%40ctrl/ngx-emoji-mart/#readme-i18n)秩序将得到尊重,但 `recent` 分类总是第一个. | | **排除** | `[]` | 不要装入排除的类别。 接受 [I18n 键类](https://npmcn.com/package/%40ctrl/ngx-emoji-mart/#readme-i18n)。 。 。 . | | **自定义** | `[]` | [自定义emojis](https://npmcn.com/package/%40ctrl/ngx-emoji-mart/#readme-custom-emojis) | | **近期** | | 传递您自己常用的 emojis 作为字符串 ID 阵列 | | **电子化** | `24` | Emoji宽度和高度 | | **(emojiClick) (英语)** | | 在搜索栏中返回密钥时没有被触发。 参数 : `{ emoji, $event }` | | **(emoji选择)** | | 只要选择了爱莫吉 返回时 `{ emoji, $event }` | | **每行数** | `9` | 每行的爱莫吉人数量. 这将会影响采摘者的宽度。 这会设置 _经常使用_ 长度以及`perLine * totalFrequentLines (4)`(中文(简体) ) | | **总次数** | `4` | 常用的emojis行数 | | **i18n (英语)** | [`{…}`](https://npmcn.com/package/%40ctrl/ngx-emoji-mart/#readme-i18n) | [一个对象](https://npmcn.com/package/%40ctrl/ngx-emoji-mart/#readme-i18n) 包含本地化字符串 | | **正则** | `false` | (原始内容存档于2013-10-12). Renders the unicode emoji | | **设定** | `apple` | Emoji套装: `'apple', 'google', 'twitter', 'facebook'` | | **工作表大小** | `64` | 爱莫吉 [工作表大小](https://npmcn.com/package/%40ctrl/ngx-emoji-mart/#readme-sheet-sizes)数字 : `16, 20, 32, 64` | | **背景图像Fn** | `((set, sheetSize) => …)` | 一个Fn,返回图像表 用于emojis。 用于避免本地工作表出现请求 . | | **图像UrlFn** | `((emoji) => string)` | 一个Fn,返回给定的emoji使用的url. 用于获取自己的资产. | | **emojis ToShowFilter 软件** | `((emoji) => true)` | 选择是否显示 emoji 的 Fn | | **显示预览** | `true` | 显示预览区域 | | **启用搜索** | `true` | 显示搜索栏 | | **爱莫吉语Tooltip** | `false` | 徘徊时显示 emojis 短名( 标题) | | **皮肤** | `1` | 默认外观颜色 : `1, 2, 3, 4, 5, 6` | | **样式** | | 应用到根元素的内行样式 。 用于定位 | | **标题** | `Emoji Mart™` | 当没有Emojis被徘徊时显示的标题 | | **隐藏奥布索莱特** | `true` | 隐藏如:"警察"的"爱莫吉",取而代之的是女性和男性"爱莫吉" | | **不是爱莫吉** | `sleuth_or_spy` | 没有搜索结果时显示的emoji | | **类别Icons** | 见 `svgs/index.ts` | 锁定图标 | | **搜索图标** | 见 `svgs/index.ts` | 搜索栏中的搜索/关闭图标 | | **显示单一类别** | | 一次只显示一个类别以增加渲染性能 | | **使用按钮** | `false` | 使用emoji 而不是跨度的按钮元素 | | **启用常态EmojiSort** | `false` | 点击时启用 emoji 重排序 | | **虚拟化** | `false` | 启用实验虚拟化渲染, 仅将 emoji 分类用于视图 | | **虚拟化 Offset** | `0` | 使用虚拟化选项来添加或减少用于确定是否构成类的像素数量 | #### I18n 时 ```ts search: 'Search', emojilist: 'List of emoji', notfound: 'No Emoji Found', clear: 'Clear', categories: { search: 'Search Results', recent: 'Frequently Used', people: 'Smileys & People', nature: 'Animals & Nature', foods: 'Food & Drink', activity: 'Activity', places: 'Travel & Places', objects: 'Objects', symbols: 'Symbols', flags: 'Flags', custom: 'Custom', }, skintones: { 1: 'Default Skin Tone', 2: 'Light Skin Tone', 3: 'Medium-Light Skin Tone', 4: 'Medium Skin Tone', 5: 'Medium-Dark Skin Tone', 6: 'Dark Skin Tone', }, ``` #### 工作表大小 工作表来自 [(单位:公斤)](https://unpkg.com/),一个为出版文件服务的全球CDN [无](https://www.npmjs.com/)。 。 。 . | 设定 | 工作表大小 | 大小 | | --- | --- | --- | | 苹果 | 16个 | 334 KB 车次 | | 苹果 | 20国 | 459个KB | | 苹果 | 第32条 | 1.08 甲基溴 | | 苹果 | 64国道 | 2.94 甲基溴 | | 脸书 | 16个 | 322 KB (英语) | | 脸书 | 20国 | 439个KB | | 脸书 | 第32条 | 1020 KB 键 | | 脸书 | 64国道 | 2.5 甲基溴 | | 谷歌 | 16个 | 301 KB (韩语) | | 谷歌 | 20国 | 409个KB | | 谷歌 | 第32条 | 907 KB (英语) | | 谷歌 | 64国道 | 2.17甲基溴 | | 推特上说 | 16个 | 288开 | | 推特上说 | 20国 | 389 KB (韩语) | | 推特上说 | 第32条 | 839个KB | | 推特上说 | 64国道 | 1.82 甲基溴 | #### 实例 `emoji` 对象 : ```ts { id: 'smiley', name: 'Smiling Face with Open Mouth', colons: ':smiley:', text: ':)', emoticons: [ '=)', '=-)' ], skin: null, native: '😃' } { id: 'santa', name: 'Father Christmas', colons: ':santa::skin-tone-3:', text: '', emoticons: [], skin: 3, native: '🎅🏼' } { id: 'octocat', name: 'Octocat', colons: ':octocat', text: '', emoticons: [], custom: true, imageUrl: 'https://github.githubassets.com/images/icons/emoji/octocat.png' } ``` ### 爱莫吉 添加 `EmojiComponent` 到您的模块或独立组件 `imports`数字 : ```ts import { EmojiComponent } from '@ctrl/ngx-emoji-mart/ngx-emoji'; ``` ```html ``` \========================================================================================= |---------------------------------------------------------------------------------------------------------------------------------------------------------------------- - - - - - - -- - - - - - - - - - -- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | **爱莫吉** {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}或者一个字符串或者一个 `emoji` 对象 qq | **大小** emoji宽度和高度 | **正则** | `false` {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}让本地的独相通的emoji | **(emojiClick) (英语)** {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 `{ emoji, $event }` | | **(emoji Leave) (英语)** {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 `{ emoji, $event }` | | **(emojiOver) (英语)** {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 `{ emoji, $event }` | | [**倒计时**](https://npmcn.com/package/%40ctrl/ngx-emoji-mart/#readme-unsupported-emojis-fallback) {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 `(emoji, props) => {}` | | **设定** | `apple` Emoji的设定: `'apple', 'google', 'twitter', 'emojione'` | | **工作表大小** | `64` 爱莫吉 [工作表大小](https://npmcn.com/package/%40ctrl/ngx-emoji-mart/#readme-sheet-sizes)数字 : `16, 20, 32, 64` | | **背景图像Fn** | `((set, sheetSize) => …)` 返回图像表用于emojis的 Fn. 用于避免本地工作表出现请求 。 | | **皮肤** | `1` QQ 皮肤颜色 : `1, 2, 3, 4, 5, 6` | | **工具提示** | `false` \*在徘徊时显示emoji短名(标题) \* \* \* | **隐藏奥布索莱特** | `false` 喜欢女性和男性的Emoji | **使用按钮** | `false` 使用按钮元素,而不是跨度 #### 不支持的情绪回落 某些设定不支持所有emojis(即Facebook不支持) `:shrug:`) (中文(简体) ). Emoji组件不会做任何事情, 当使用独立的"Emoji"组件时,你可以通过提供"Emoji"来提供任何你想要的东西 `fallback` 道具来. 使组件 `:shrug:` 您必须: ```ts emojiFallback = (emoji: any, props: any) => (emoji ? `:${emoji.shortNames[0]}:` : props.emoji); ``` ```html ``` ## 自定义emojis 您可以提供自定义的 emojis , 它会出现在自己的类别。 您可以使用单个图像作为图像Url,也可以使用第二个对象显示的图示表. ```ts const customEmojis = [ { name: 'Octocat', shortNames: ['octocat'], text: '', emoticons: [], keywords: ['github'], imageUrl: 'https://github.githubassets.com/images/icons/emoji/octocat.png', }, { name: 'Test Flag', shortNames: ['test'], text: '', emoticons: [], keywords: ['test', 'flag'], spriteUrl: 'https://cdn.jsdelivr.net/npm/emoji-datasource-twitter@14.0.0/img/twitter/sheets-256/64.png', sheet_x: 1, sheet_y: 1, size: 64, sheetColumns: 61, sheetRows: 60, }, ]; ``` ```html ``` ## 无头搜索 这个 `Picker` 您不必利用高级搜索结果. ```ts import { EmojiSearch } from '@ctrl/ngx-emoji-mart'; class ex { constructor(private emojiSearch: EmojiSearch) { this.emojiSearch.search('christmas').map(o => o.native); // => [🎄, 🎅🏼, 🔔, 🎁, ⛄️, ❄️] } } ``` ## 将 emoji 显示为自定义元素 ```ts // $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); ``` ## 存储 默认情况下, EmojiMart 将存储用户所选择的皮肤和经常使用的 emojis `localStorage`。 。 。 . 可能的密钥有: | 密钥 | 数值 | 说明 | | --- | --- | --- | | 皮肤 | `1, 2, 3, 4, 5, 6` | | | 经常 | `{ 'astonished': 11, '+1': 22 }` | 键为 emoji 名而值为用法计数的对象 | | 最后一个 | 沉闷了 | (可选) `frequently` 以确保最近点击的emoji 将永远出现在“最近”类别中 | ## 特征 ### 强大的搜索 #### 简称、名称和关键词 不仅如此 **爱莫吉·马特** 与大多数爱莫吉人相比. ![summer](https://raw.githubusercontent.com/scttcper/ngx-emoji-mart/master/misc/emoticons.png) #### 表情 唯一一个在寻找表情时返回emojis的爱莫吉采取器. ![emoticons](https://raw.githubusercontent.com/scttcper/ngx-emoji-mart/master/misc/emoticons.png) ### 完全自定义 #### 锁定颜色、标题和默认的 emoji ![customizable-color](https://raw.githubusercontent.com/scttcper/ngx-emoji-mart/master/misc/customizable-color.png) ![pick-your-emoji](https://raw.githubusercontent.com/scttcper/ngx-emoji-mart/master/misc/pick-your-emoji.png) #### Emojis 大小和长度 ![size-and-length](https://raw.githubusercontent.com/scttcper/ngx-emoji-mart/master/misc/size-and-length.png) #### 默认外观颜色 作为开发者,您可以控制默认使用哪个外观颜色. ![skins](https://raw.githubusercontent.com/scttcper/ngx-emoji-mart/master/misc/skins.png) 然而,根据用户的偏好,它可以被覆盖. ![customizable-skin](https://raw.githubusercontent.com/scttcper/ngx-emoji-mart/master/misc/customizable-skin.png) #### 支持的多组 苹果/谷歌/推特/脸书 ![sets](https://raw.githubusercontent.com/scttcper/ngx-emoji-mart/master/misc/sets.png) * * * > GitHub 图像 [@scttcper (英语)](https://github.com/scttcper)  • 妇女  微博 [@scttcper (英语)](https://twitter.com/scttcper) ## 常见问题 ### @ctrl/ngx-emoji-mart 是什么？ 自定义类似Angular 的 lack- emoji 拾取器 ### 如何安装 @ctrl/ngx-emoji-mart？ 在项目目录运行 npm install @ctrl/ngx-emoji-mart，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@angular/core（\>=15\.0\.0-0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @ctrl/ngx-emoji-mart 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @ctrl/ngx-emoji-mart 支持 ESM 还是 CommonJS？ 以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。 ### @ctrl/ngx-emoji-mart 可以商用吗？ @ctrl/ngx-emoji-mart 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @ctrl/ngx-emoji-mart 的下载量有多少？ 根据 npm 官方下载统计，@ctrl/ngx-emoji-mart 在 2026/10/11 – 2026/11/09 这 30 天内被下载 396,908 次，日均约 13,230 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @ctrl/ngx-emoji-mart 还在维护吗？ 最新版本 9\.3\.0 发布于 2025/09/16（1\.1 年前）；至今共发布 85 个版本，其中过去 12 个月发布了 0 个；首次发布于 2018/02/11。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。