在前端开发过程中，经常需要使用表单控件来收集用户的输入。其中，单选按钮是常用的一种表单控件。虽然 HTML 提供了单选按钮的标签，但是在实际开发过程中，我们往往需要更为灵活的控件来满足业务需求。此时，借助 npm 包 ‘ng2-radioboxlist’ 可以快速实现单选按钮的集成。
安装
首先，我们需要使用 npm 进行安装。在终端中输入以下命令：
npm install ng2-radioboxlist
使用
在使用 ng2-radioboxlist 之前，需要在 Angular 项目中引入该模块。在 app.module.ts 文件中添加以下代码：
-- -------------------- ---- -------
------ - ------------- - ---- ----------------------------
------ - -------- - ---- ----------------
------ - ------------ - ---- ------------------
------ - ------------------------ - ---- -------------------
-----------
------------- -
-------------
------------------------
--
-------- -
-------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -在组件文件中，我们可以通过以下方式使用 ng2-radioboxlist：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- --------------
--------- -
------------- ---------------
----------------------------
---------------
--
---------- ---------------------------
--
------ ----- ---------------- -
----- - -
- ------ -- ------------ ------- -- --
- ------ -- ------------ ------- -- --
- ------ -- ------------ ------- -- --
- ------ -- ------------ ------- -- --
- ------ -- ------------ ------- -- --
--
-------------- ------ - --
-如上代码所示，我们在组件模板中使用 ng2-radioboxlist，并且传入要显示的选项数组和双向绑定的属性。选项数组中，每个对象都包含一个 value 属性和一个 displayText 属性，分别表示选项的值和显示文本。
高级用法
除了基本的用法外，ng2-radioboxlist 还支持以下高级用法：
响应式表单
我们可以在响应式表单中使用 ng2-radioboxlist。在组件文件中添加以下代码：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ------------ --------- - ---- -----------------
------------
--------- ---------------
--------- -
----- -------------------
------------- ------------------------------
----------------
---------------
-------
--
---------- ---------------------------
--
------ ----- ----------------- ---------- ------ -
----- ----------
----- - -
- ------ -- ------------ ------- -- --
- ------ -- ------------ ------- -- --
- ------ -- ------------ ------- -- -
--
------------------- ------------ ------------ - -
---------- -
--------- - ------------------------
------------- -
---
-
-事件处理
我们可以监听 ng2-radioboxlist 的值变化事件，以便处理用户的操作。在模板文件中添加以下代码：
<radioboxlist [items]="items"
[(ngModel)]="selectedValue"
(valueChanged)="onValueChanged($event)">
</radioboxlist>在组件文件中添加以下代码：
onValueChanged(value: number) {
console.log('Selected value: ', value);
}此时，每次用户操作单选按钮时，都会触发 onValueChanged 方法，并输出当前选中的值。
总结
在本文中，我们介绍了如何使用 npm 包 ng2-radioboxlist 实现单选按钮的集成。我们不仅详细讲解了 ng2-radioboxlist 的安装和使用方法，还介绍了如何在响应式表单中使用和监听 ng2-radioboxlist 的值变化事件。使用这些高级用法，我们可以更方便地集成单选按钮，并且可以根据业务需求进行更为灵活的定制。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562cb81e8991b448e0131