代码之家 › 专栏 › 技术社区 › John Rousseau

将js组件导入Angular 5

angular-cli angular javascript

John Rousseau · 技术社区 · 6 年前

我对Angular还不熟悉,还在努力学习这项技术。我有一个Angular 5应用程序,我想在其中使用JS组件。这可能是一个更一般的问题,但以下是我的具体情况。

设置:VS代码,角度5 组成部分: http://seiyria.com/bootstrap-slider/

我使用npm安装引导滑块安装了它。我可以看到node_modules文件夹中的文件。

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

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

我可以在我的组件中使用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代码片段放入组件时。ts文件,我出错了。

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

错误:找不到名称“Slider”。

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

感谢您的帮助!

1 回复 | 直到 6 年前

Anshuman Jaiswal 6 年前

添加 Slider 在组件中:

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

更新1:

加入js index.html 作为:

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.0.2/bootstrap-slider.min.js"></script>
</head>

推荐文章

Kiara · 根据条件角度显示多个模板

1 年前

IonicMan · 剑道网格在宽度过大时不显示某些列

1 年前

Piotr Deja · 如何在subscribe方法中为参数赋值,然后从组件内部的任何位置检索该值?

1 年前

Ben5 · 服务器端总是接触FormControl

1 年前

allforthenoob · 我该怎么分类?

1 年前

Hamid Elouardaoui · 角度生成:发生未处理的异常:服务不再运行

1 年前

Hugh Jones · 如何创建适用于多个来源的自签名开发证书

1 年前

jthorn · 角度对象未在HTML中显示

1 年前

clem · 如何在Angular应用程序中突出显示页面的一部分?

2 年前

Kael · 在html表格中显示关系api数据-角度

2 年前