介绍
ng2-ui-switch-aot是一个Angular 2的开关按钮组件，它是一个可重用的NPM包。在本文中，我们将深入研究ng2-ui-switch-aot，了解如何使用它来创建可定制的开关按钮并集成到我们的Angular 2应用程序中。
安装及使用
ng2-ui-switch-aot已经发布到NPM，我们可以使用npm安装它。
步骤一：安装ng2-ui-switch-aot
在Angular 2应用程序的根目录下运行以下命令：
npm install ng2-ui-switch-aot --save
步骤二：导入ng2-ui-switch-aot
在app.module.ts文件中导入ng2-ui-switch-aot，如下所示：
-- -------------------- ---- -------
------ - ----------------- - ---- --------------------
-----------
-------- -
--------------
------------
--------------------
-----------
--------------------------------- --------- ---- ----- ----- ---------
--
------------- -
------------
--
---------- --------------
--
------ ----- --------- -
-步骤三：使用ng2-ui-switch-aot
在组件中使用ng2-ui-switch-aot的示例代码如下：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -------------
--------- -
---- -------------------
------------- --------------
-------------- --------------------------------------
-------- ------- ---------
------
-
--
------ ----- --------------- -
------- - ------
-可定制化配置
ng2-ui-switch-aot提供许多自定义选项。下面是一些常见的配置项：
1. size
size选项可以设置开关的大小，有三个值 small、medium、large。
Ng2UiSwitchModule.forRoot({size: 'small'})2. color
color选项设置开关的颜色：
Ng2UiSwitchModule.forRoot({color: 'red'})3. disabled
disabled选项用于禁用开关。
<ng2-ui-switch [(ngModel)]="checked" [disabled]="true"></ng2-ui-switch>
4. checkedLabel / uncheckedLabel
checkedLabel和uncheckedLabel选项用于定义开关打开和关闭状态下的标签。
<ng2-ui-switch [(ngModel)]="checked" [checkedLabel]="'On'" [uncheckedLabel]="'Off'"></ng2-ui-switch>
总结
在本文中，我们学习了如何使用ng2-ui-switch-aot创建自定义开关按钮并在Angular 2应用程序中集成它。我们还深入了解了ng2-ui-switch-aot的可定制化选项，希望本文能够帮助您更好地使用ng2-ui-switch-aot。
完整示例代码可在GitHub中找到。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600557f281e8991b448d50aa