Angular 2 滑块范围 - 添加 Ion.RangeSlider 库 [英] Angular 2 slider range - Add Ion.RangeSlider library

问题描述

我见过这个库有一个滑块范围功能，但在 AngularJS 中:Ion.RangeSlider

并且有一个人为它制作了一个包装器以便在 Angular 2 中工作:ng2-ion-range-slider

我使用的是 webpack 而不是 Angular-CLI.

我已尝试按照他的安装说明进行操作，并且可以正常工作，但没有样式.

谁能帮我找出在 webpack 中放置样式路径的位置?

解决方案

经过几次失败的尝试，我成功了.

首先，我将 Angular 5 与 Webpack 和 Angular Material 一起使用.

1. 将滑块库及其包装器添加到 package.json 文件中.

   离子范围滑块":2.2.0"；ng2-ion-range-slider":~1.0.3"

2. 我已将滑块样式添加到我的项目中的 theme.scss 文件中，如下所示:

   @import '~@angular/material/_theming.scss';@import '~ion-rangeslider/css/ion.rangeSlider.css';@import '~ion-rangeslider/css/ion.rangeSlider.skinModern.css';//@import '~ion-rangeslider/css/ion.rangeSlider.skinFlat.css';

<块引用>

根据您选择的皮肤添加您需要的样式.

3. 不需要在webpack中导入javascript文件，我是说这两个文件:

   jquery/dist/jquery.min.js离子范围滑块/js/ion.rangeSlider.js

4. 在您的 AppModule 中导入 IonRangeSliderModule.

   从'ng2-ion-range-slider'导入{IonRangeSliderModule}；

现在，您可以像这样使用它:

</ion-range-slider>

---

更新

对于那些不使用角材料

您可以在 webpack 配置文件中导入 css 和 scss 文件.

1-) 安装 sass-loader 库:

sass-loader":^6.0.3"，sass-resources-loader":^1.3.3"，

2-) 在项目中创建新的 scss 文件，使用任何名称(例如 ./src/index.scss)并添加所有 css 和 scss 你想导入到这个文件中.

3-) 在 webpack.common.js 文件中，将此添加到规则中或更改它(如果存在):

/*** 字符串和 sass 加载器对 *.scss 文件的支持(来自 Angular 组件)* 将编译后的 CSS 内容作为字符串返回**/{测试:/\.scss$/,使用: ['to-string-loader', 'css-loader', 'sass-loader',{loader: 'sass-resources-loader',选项: {//提供资源文件的路径资源:`./src/index.scss`},},],排除:[helpers.root('src', 'styles')]},

I have seen this library that have a slider range feature but in AngularJS: Ion.RangeSlider

And there is a guy make a wrapper for it to work in Angular 2: ng2-ion-range-slider

I am using webpack not Angular-CLI.

I have tried to follow his install instructions and it is worked but with no styles.

Can anyone help me to find out where to put the style paths in the webpack?

解决方案

I have made it after some failed attempts.

First, I am using Angular 5 with Webpack and Angular Material.

1. add the slider library and its wrapper to package.json file.

   "ion-rangeslider": "2.2.0" "ng2-ion-range-slider": "~1.0.3"

2. I have added the slider styles to theme.scss file inside my project, like this:

   @import '~@angular/material/_theming.scss'; @import '~ion-rangeslider/css/ion.rangeSlider.css'; @import '~ion-rangeslider/css/ion.rangeSlider.skinModern.css'; // @import '~ion-rangeslider/css/ion.rangeSlider.skinFlat.css';

add the style you need depends on the skin you choose.

3. There is no need to import javascript file in webpack, I mean these two files:

   jquery/dist/jquery.min.js ion-rangeslider/js/ion.rangeSlider.js

4. Import IonRangeSliderModule in your AppModule.

   import { IonRangeSliderModule } from 'ng2-ion-range-slider';

Now, you can use it like:

<ion-range-slider type="double" [min]="min" [max]="max" [step]="step" [from]="value1" 
                  [to]="value2" (onFinish)="sliderChange($event)">
</ion-range-slider>

---

Update

For those don't use Angular Material

You can import css and scss file inside the webpack configuration file.

1-) Install sass-loader library:

"sass-loader": "^6.0.3",
"sass-resources-loader": "^1.3.3",

2-) Create new scss file inside the project with any name (Ex. ./src/index.scss) and add all the css and scss you want to import to this file.

3-) Inside webpack.common.js file, add this to rules or change it if exist:

/**
 * To string and sass loader support for *.scss files (from Angular components)
 * Returns compiled CSS content as a string
 *
 */
{
  test: /\.scss$/,
  use: ['to-string-loader', 'css-loader', 'sass-loader',
    {
      loader: 'sass-resources-loader',
      options: {
        // Provide path to the file with resources
        resources: `./src/index.scss`
      },
    },
  ],
  exclude: [helpers.root('src', 'styles')]
},

这篇关于Angular 2 滑块范围 - 添加 Ion.RangeSlider 库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！