将js组件导入Angular 5

时间:2018-06-01 19:40:43

标签: javascript angular angular-cli

我是Angular的新手并且仍在努力学习这项技术。我有一个Angular 5应用程序,我想使用JS组件。这可能是一个更普遍的问题,但这是我的具体细节。

设置:VS Code,Angular 5 组件:http://seiyria.com/bootstrap-slider/

我使用npm install bootstrap-slider安装它。我可以在node_modules文件夹中看到这些文件。

我在angular-cli.json文件中包含了CSS和JS文件:

  "styles": [
    "../node_modules/bootstrap-slider/dist/css/bootstrap-slider.min.css"
  ],
  "scripts": [
    "../node_modules/bootstrap-slider/dist/bootstrap-slider.min.js"
  ],

我可以在component.html中使用HTML标记:

 <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"/>

当我将JS片段放在component.ts文件中时,我收到错误。

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

错误:找不到名称&#39;滑块&#39;。

我不认为我需要使用导入语句,而且根据我的研究,看起来我不应该在component.html文件中包含JS或CSS

感谢任何帮助!

1 个答案:

答案 0 :(得分:0)

在组件中添加save

Slider

更新1:

import { Component } from '@angular/core'; ... declare var Slider: any; ... @Component({ ... 中添加js:

index.html