ng2-choices 是一个 Angular 2+ 的选择框组件，它可以让用户从预定义的选项中选择一个或多个值。在实际开发场景中，这个组件可以作为表单输入项、设置项、多选框和诸如此类的元素使用。使用 ng2-choices 可以大幅减少我们开发这些元素所需要的时间和工作量。
安装
为了开始使用 ng2-choices，首先需要使用 npm 安装它：
npm install ng2-choices --save
如何使用
下面是一个简单的示例，展示了如何将 ng2-choices 集成到你的 Angular 应用中。
在首先我们需要导入 ng2-choices，这可以在 app.module.ts 文件中完成：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - ----------- - ---- ----------------- ------ - ------------ - ---- ------------------ ------ - ------------- - ---- -------------- ----------- -------- --------------- ------------ --------------- ------------- --------------- ---------- -------------- -- ------ ----- --------- - -
在模板中，可以使用 ng2-choices 组件和 *ngFor 指令来展示选项列表。下面是一个简单的示例，其中选项列表仅仅包含了几个固定的值：
-- -------------------- ---- -------
-------------------
-------- ------------------ ----------------------------
------------- ----------- ----- -- ------ ----- ----- -------
------- ---------------- --------- ---------
---------------
----------
-----------------------------在这个示例中，我们展示了一个简单的 ng2-choices 组件，它包含了一个选项列表和一个用于展示所选值的元素。该组件支持单选和多选两种模式。
选项
ng2-choices 组件有很多配置选项，可以让我们自定义组件的行为和样式。下面是一些常用的选项和它们的意义。
| 选项 | 描述 |
|---|---|
| placeholder | 未选择时显示的提示文字 |
| multiple | 是否为多选模式 |
| disabled | 是否禁用选择器，禁止用户进行选择 |
| name | 选择器的名称，这个名称会出现在发送到服务器请求中 |
| value | 组件的初始值。可以是单个值或数组值 |
示例代码
下面是一个较为复杂的示例，它展示了一个完整的表单页面，包含了一个选择框和一个多选框：
-- -------------------- ---- -------
----------------------
------
---
------ -----------------------
-------- ------------------ --------------------------- -----------
------------- ----------- ----- -- ------ ----- ----- -------
------- ---------------- --------- ---------
---------------
----------
----
---
------ ------------------------
-------- ----------------- ---------------------------- ----------- ------------------
------------- ----------- ----- -- --------
------- --------------------- ---------------------------- --------------- ---------
---------------
----------
----
------- -------------------------
-------
---------------------------- -------------------------- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- ---------
--------- -----
--
------ ----- ------------ -
-------------- -------
--------------- ---------
------ - -
------- ----- ------ -------- --------- ------
------- ----- ------ ----------
------- ----- ------ --------------
------- ----- ------ ------------- --------- -----
--
-在上面的代码中，我们创建了两个选择框。第一个是单选模式，第二个则是多选模式。我们还给第二个选择框添加了一些表单元素，如表单名称和禁用物品。
总结
ng2-choices 是一个实用的 Angular 组件，它可以帮助我们快速创建各种选择框和多选框。通过使用它，我们可以减少编写重复代码的工作量，从而更加高效地开发前端应用程序。在使用 ng2-choices 时，可以根据自己的需求定制组件的配置选项，并结合实际的业务场景进行配置。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d3981e8991b448dafa7