什么是 @nglibrary/ngx-choosy
@nglibrary/ngx-choosy 是一个 Angular 应用程序的通用选择器库，它提供了一种简单的方式来创建具有动态选项的选择器组件。无论您是选择产品，日期，颜色，还是其他任何东西，ngx-choosy 带来了更方便和更流畅的用户体验。
如何安装
使用 npm 安装 @nglibrary/ngx-choosy：
npm install @nglibrary/ngx-choosy --save
如何使用
- 导入 NgxChoosyModule
在 app.module.ts 中导入 NgxChoosyModule 并添加到 imports 数组中。
-- -------------------- ---- -------
------ ---------- ---- ----------------
------ --------------- ---- ----------------------------
------ ----------------- ---- ------------------------
------ -------------- ---- ------------------
-----------
-------- --------------- -----------------
------------- ---------------
---------- --------------
--
------ ----- --------- -
-- 创建 ngx-choosy 组件
-- -------------------- ---- -------
------ ----------- ---- ----------------
------ -------------- ---------------- ---- ------------------------
------------
--------- -----------
--------- -
-------
-----------------
--------------------------
---------------------
---------
-
--
------ ----- ------------ -
------------- ----------------
------- ------------ - -
------------- -------
------- ----
--
---------------------- -------- ----------------- -
-- -- ---------- ---
-
-在这个例子中，我们使用了 displayValue 参数来展示所选择的项目。在 fetchItems 方法中，我们可以返回一个返回 Observable 数据的函数或者是直接返回 Observable 数据。
参数说明
- 引入
import {ChoosyConfig, ChoosySelection} from '@nglibrary/ngx-choosy';- config
config 是 ngx-choosy 的一些配置参数，具体如下：
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| search | boolean | true | 是否启用搜索功能 |
| searchPropName | string | undefined | 要搜索的属性名，不填时默认搜索 displayValue 属性值 |
| displayValue | string | 'value' | 要展示的属性名 |
| placeholderText | string | undefined | 占位符文本 |
| multiSelect | boolean | false | 是否启用多选 |
| customTemplate | TemplateRef | undefined | 自定义模板 |
| position | string | 'auto' | 下拉菜单的位置：'auto', 'top', 'bottom' |
| keyboardEvents | boolean | true | 是否响应键盘事件 |
| enableTooltips | boolean | false | 是否启用工具提示 |
- fetch方法
fetch 方法是获取选项的一个函数，在选择器展开时会调用。这个函数返回的是一个能产生 Observable 数据的函数或直接是 Observable 数据。
示例代码
这是一个简单的示例代码，演示如何使用 @nglibrary/ngx-choosy 创建一个选择器组件。
-- -------------------- ---- -------
------ ----------- ---- ----------------
------ -------------- ---------------- ---- ------------------------
------ ------------ --- ---- -------
------------
--------- -----------
--------- -
-------
-----------------
--------------------------
---------------------
---------
-
--
------ ----- ------------ -
------------- ----------------
------- ------------ - -
------------- -------
------- ----
--
---------------------- -------- ----------------- -
------ ----
---- -- ----- -----------
---- -- ----- ---------
---- -- ----- -------
---- -- ----- ---------
---- -- ----- ------------
---- -- ----- -----------
---- -- ----- ------------
---- -- ----- ---------
------------- -- --------------------------------------------------------- --- -----
-
-总结
@nglibrary/ngx-choosy 是一个非常实用的选择器库，它为 Angular 应用程序提供了快捷、高效的选择器实现方式。希望这篇文章对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055eaf81e8991b448dc3e4