atomite-ng2-nouislider 是一个可以在 Angular 2+ 项目中使用的 nouislider 封装库。它通过提供可重用的组件和服务，简化了 nouislider 的集成过程。本篇文章将详细介绍如何使用 atomite-ng2-nouislider，包括安装和配置依赖项，如何使用组件以及代码示例。
安装
在使用 atomite-ng2-nouislider 之前，需要安装以下依赖：
- Angular 2+
- nouislider
可以使用 npm 进行依赖的安装。
npm i atomite-ng2-nouislider nouislider --save
配置
在项目中引入 atomite-ng2-nouislider。
在 Angular 的 NgModule 中添加 AtomiteNg2NouisliderModule。
import { AtomiteNg2NouisliderModule } from 'atomite-ng2-nouislider';
@NgModule({
imports: [
AtomiteNg2NouisliderModule,
]
})
export class AppModule { }在组件中添加 NouisliderComponent。
<nouislider [options]="options"></nouislider>
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- --------------
--------- -
----------- ---------------------------------
--
--
------ ----- ---------------- -
------ ------- - -
------ ---- ----
-------- -----
------ -
---- --
---- ----
--
--
-组件
NouisliderComponent
<nouislider [options]="options"></nouislider>
| 属性 | 默认值 | 描述 |
|---|---|---|
| options | null | nouislider options |
| ngModel | null | 设置滑块的值 |
| 事件 | 描述 |
|---|---|
| change | 滑块值更改时触发该事件，返回值为滑块当前的值。 |
NouisliderService
import { NouisliderService } from 'atomite-ng2-nouislider';
constructor(private nouisliderService: NouisliderService) {}
public create(element: HTMLElement, options: object): nouisliderInstance {}
public destroy(element: HTMLElement): void {}| 方法 | 描述 |
|---|---|
| create(element: HTMLElement, options: object): nouisliderInstance | 添加 nouislider 实例，返回 nouislider 实例 |
| destroy(element: HTMLElement): void | 销毁 nouislider 实例 |
示例
<nouislider [(ngModel)]="value" [options]="options" (change)="onChange($event)"></nouislider>
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----------------- - ---- -------------------------
--------- --------------- -
------- ---------
-
------------
--------- --------------
--------- -
----------- ------------------- ------------------- -----------------------------------------
--
--
------ ----- ---------------- -
------ ----- - ---- ----
------ ------- - -
------ ---- ----
-------- -----
------ -
---- --
---- ----
--
--
------------------- ------------------ ------------------ --
------ --------------- ----------------- ---- -
--------------------------
-
------ ----------- ---- -
----- ------ - ---------------------------------------------------------------- -
------ ---- ----
-------- -----
------ -
---- --
---- ----
--
---
------------------- ------- ---------------- -- -
--------------------------
---
-
------ -------------- ---- -
------------------------------------------------------------------
-
-结尾
本篇文章通过介绍 npm 包 atomite-ng2-nouislider 的使用教程，详细讲解了如何在 Angular 2+ 中使用 nouislider。希望能够给想学习或使用 atomite-ng2-nouislider 的开发者提供帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600564ff81e8991b448e19a1