介绍
ng2-multiselect 是一个 Angular2+ 的多选下拉框组件库，具有高度的可配置性和灵活性。 本文将介绍如何使用 ng2-multiselect 包，其中包括如何安装、配置以及代码示例。
安装
使用 ng2-multiselect 需要安装以下前提包:
- Angular ^2.0.0
- rxjs ^5.0.0
然后，可以通过 npm 安装 ng2-multiselect:
--- ------- --------------- ------
配置
ng2-multiselect 可以通过 @Input 和 @Output 两个装饰器来配置。以下是 ng2-multiselect 的配置项:
Input
- data: { id:number, name:string }[] - 显示的选项列表
- settings: MultiselectSettings - 多选框的设置
- texts: MultiselectTexts - 多选框的文字设置
------ - --------- - ---- ----------------
------ - ------------------- --------------------- ----------------- - ---- ------------------
------------
--------- ------
--------- -
------------------- -------------------------
-
--
------ ----- ------------ -
-- ---- -- -- --------- -- -----------
---------- ---------------------
-- ----------- -------- ------
----------- -------------------- - -
------------- -----
------------- --------------
-------------- ---- ----------- ---------------
--------------- --
-------------------- -----
------------- -----
--------------- -----
----------- ------
--
-- ----------- ---- -------- ------
-------- ----------------- - -
--------- ------- -----
----------- --------- -----
-------- ----- ----------
-------------- ------ ----------
------------------ ------------
------------- ---------
--
------------- - -
-Output
- onAdded: EventEmitter - 添加选项时的输出
- onRemoved: EventEmitter - 删除选项时的输出
- onOpened: EventEmitter - 多选框打开时的输出
- onClosed: EventEmitter - 多选框关闭时的输出
------ - --------- - ---- ----------------
------ -
-------------------
---------------------
------------------
------------------------
-----------------------
- ---- ------------------
------------
--------- ------
--------- -
------------------- --- -----------------------------------------------------
-
--
------ ----- ------------ -
--------- - ------ -- -
------------------
--
------------- - -
-代码示例
--------------- ------------------ ----------------------- ----------------- -------------------------------------------------
------ - --------- - ---- ----------------
------ -
-------------------
---------------------
------------------
------------------------
-----------------------
- ---- ------------------
------------
--------- ------
--------- -
------------------- ------------------ ----------------------- ----------------- -----------------------------------------------------
-
--
------ ----- ------------ -
---------- -------------------- - -
- --- -- ----- ------- -- --
- --- -- ----- ------- -- --
--
----------- -------------------- - -
------------- -----
------------- --------------
-------------- ---- ----------- ---------------
--------------- --
-------------------- -----
------------- -----
--------------- -----
----------- ------
--
-------- ----------------- - -
--------- ------- -----
----------- --------- -----
-------- ----- ----------
-------------- ------ ----------
------------------ ------------
------------- ---------
--
--------- - ------ -- -
------------------
--
------------- - -
-结论
ng2-multiselect 是一个非常灵活且易于使用的 Angular2+ 组件，它提供了高度的可配置性，可以轻松地创建一个美观、功能强大的多选下拉框组件。本文介绍了 ng2-multiselect 的安装以及配置方法，同时提供了一个代码示例，希望对您有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60055aac81e8991b448d83c8