Angular 2 滑块范围 - 添加 Ion.RangeSlider 库

Question

我已经看到这个库有一个滑块范围功能，但在 AngularJS 中： Ion.RangeSlider

还有一个人为它制作了一个包装器以在 Angular 2 中工作： ng2-ion-range-slider

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

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

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

Answer 1

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

首先，我将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';

添加你需要的样式取决于你选择的皮肤。

1. javascript文件不需要在webpack中导入，我的意思是这两个文件：

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

2. 在您的AppModule 中导入IonRangeSliderModule。

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

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

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

---

更新

对于那些不使用 Angular 材质的人

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

1-) 安装sass-loader 库：

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

2-) 在项目中以任意名称（例如./src/index.scss）创建新的scss 文件，并将您要导入的所有css 和scss 添加到此文件中。

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

/**
 * 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')]
},