Question

我正在使用http://seiyria.com/bootstrap-slider/的示例1来添加引导百分比滑块。我用npm install bootstrap-slider安装了bootstrap-slider。我的component.html看起来像

following.:

<div class="lastpart">
            <div class="lasttext">
              Annual % rate of increase:
            </div>
            <input id="ex1" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="14"/>
          </div>

在我的index.html中，我在index.html中添加了以下脚本。

<script>
    var slider = new Slider('#ex1', {
      formatter: function(value) {
        return 'Current value: ' + value;
      }
    });
</script>

但它在index.html中给了我错误'未捕获的ReferenceError：Slider未定义'。任何帮助表示赞赏！

更新

我的package.json如下：

{
  "name": "demo",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^4.0.0",
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/router": "^4.0.0",
    "bootstrap": "^3.3.7",
    "bootstrap-slider": "^9.8.1",
    "core-js": "^2.4.1",
    "ng2-slideable-directive": "^1.0.13",
    "ng2-slider-component": "^1.0.9",
    "ng2-styled-directive": "^1.0.5",
    "ngx-bootstrap": "^1.8.1",
    "rxjs": "^5.4.1",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "1.2.7",
    "@angular/compiler-cli": "^4.0.0",
    "@angular/language-service": "^4.0.0",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.0.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.0.4",
    "tslint": "~5.3.2",
    "typescript": "~2.3.3"
  }
}

Answer 1

你应该在index.html中添加对bootstrap-slider css和js文件的引用。在这里找到cdn refs： https://cdnjs.com/libraries/bootstrap-slider

Answer 2

    I have been using inside component file and am not getting any error and also it not working for me.

    I have included 
     "../node_modules/jquery/dist/jquery.min.js",
            "../node_modules/bootstrap/dist/js/bootstrap.min.js",
            "../node_modules/element-resize-detector/dist/element-resize-detector.min.js",
            "../node_modules/cropperjs/dist/cropper.js",
            "../node_modules/bootstrap-slider/dist/bootstrap-slider.min.js",
            "../node_modules/bootstrap-slider/dist/bootstrap-slider.js"

    same way I included css also

am following example 2 http://seiyria.com/bootstrap-slider/

my ts file code 
 ngAfterInit() {
        let ex2 = document.getElementById("ex2");
        var slider = new Slider(ex2, {
            formatter: function (value) {
                return 'Current value: ' + value;
            }
        });
        /*  let ex2 = document.getElementById("ex2");
          var slider = new Slider(ex2, {});*/
    }
and html code 

<input id="ex2" type="text" class="span2" value="" data-slider-min="10" data-slider-max="1000" data-slider-step="5" data-slider-value="[250,450]"/> <b>€ 1000</b>`enter code here`

Bootstrap-Slider无法在angular2中工作

2 个答案: