在 Web 开发中，下拉框组件是非常常见的一个 UI 组件。但是在不同的项目中，下拉框又有不同的需求，比如：多选、搜索功能等等。针对这些需求，开发者往往需要自行开发组件，浪费了宝贵的开发时间。ngx-dropdowns 是一个基于 Angular 的下拉框组件库，提供了各种各样的下拉框组件，可以满足大部分项目的需求。
安装 ngx-dropdowns
安装 ngx-dropdowns 可以使用命令行工具 npm：
npm i ngx-dropdowns
使用 ngx-dropdowns
引入模块
在需要使用下拉框组件的模块中，需要引入 DropdownsModule 模块，并添加到 imports 数组中。
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - --------------- - ---- ----------------
------ - ------------ - ---- ------------------
-----------
-------- -
--------------
---------------
--
------------- -
------------
--
---------- - ------------ -
--
------ ----- --------- - -使用下拉框组件
在模板中使用下拉框组件非常简单，只需要添加 <ngx-dropdown> 标签，并设置相关参数即可。
<ngx-dropdown [items]="items"></ngx-dropdown>
上述代码中，items 是一个数组，包含了需要显示的数据。可以通过在组件中设置 itemValueField 和 itemTextField 来指定在数据中显示哪些字段。
<ngx-dropdown [items]="items" itemValueField="id" itemTextField="name"></ngx-dropdown>
如果需要使用搜索功能，可以通过在组件中添加 searchable 属性来启用搜索功能。
<ngx-dropdown [items]="items" searchable="true"></ngx-dropdown>
如果需要使用多选功能，可以设置 multi 属性并设置 selectedItems 数组来实现。
<ngx-dropdown [items]="items" [multi]="true" [selectedItems]="selectedItems"></ngx-dropdown>
注意：在组件中设置 multi 属性后，默认情况下下拉框的样式会变成多选框的样式。
示例代码
下面是一个完整的示例代码：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
------------- --------------- ------------------- -------------------- ------------------- -------------- -----------------------------------------------
-
--
------ ----- ------------ -
----- - -
- --- -- ----- ------ --
- --- -- ----- ----- --
- --- -- ----- ------------ --
- --- -- ----- ------------ --
- --- -- ----- --------- --
- --- -- ----- ------- --
- --- -- ----- ----- --
- --- -- ----- ----------- --
- --- -- ----- ------------- -
--
------------- - -
- --- -- ----- ------ --
- --- -- ----- ------------ -
--
-总结
本文介绍了如何使用 ngx-dropdowns 实现下拉框组件并自定义组件的样式和功能。通过学习本文，你可以快速上手使用 ngx-dropdowns 组件库，以及了解如何自定义组件的样式和功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055aa581e8991b448d8211