Question

我需要滑块，我在项目中使用AdminLTE

<input type="text" value="" class="slider form-control"
       data-slider-min="-200" data-slider-max="200"
       data-slider-step="5"  data-slider-orientation="horizontal"
       data-slider-selection="before" data-slider-tooltip="show"
       data-slider-id="yellow">

将输入转换为div，需要

<!-- Ion Slider -->
<script src="../../plugins/ionslider/ion.rangeSlider.min.js"></script>
<!-- Bootstrap slider -->
<script src="../../plugins/bootstrap-slider/bootstrap-slider.js"></script>
<script>
  $(function () {
    /* BOOTSTRAP SLIDER */
    $('.slider').slider();
});
</script>

前2我输入后在index.html和我的模板中的最后一个函数中导入它不起作用我在哪里以及如何输入此功能？我在index.html中做到了但是它不起作用

Answer 1

您尝试使用的Javascript是jQuery，如果您不使用jQuery，那么该代码将无效。你可以告诉它是jQuery，因为$。

如果你在AngularJs应用程序中使用jQuery而不是仔细检查

<script src="../../plugins/ionslider/ion.rangeSlider.min.js"></script>
<script src="../../plugins/bootstrap-slider/bootstrap-slider.js"></script>

实际上正在加载。

如果您不使用jQuery，这里有一个“普通的”Javascript实现代替jQuery实现：

<script>
    function initSlider() {
       var sliderInputElem = document.getElementsByClassName('slider');
       sliderInputElem.slider();
    }
    window.onload = initSlider;
</script>

顺便说一句应该可以改变

<script src="../../plugins/ionslider/ion.rangeSlider.min.js"></script>
<script src="../../plugins/bootstrap-slider/bootstrap-slider.js"></script>

到

<script src="/plugins/ionslider/ion.rangeSlider.min.js"></script>
<script src="/plugins/bootstrap-slider/bootstrap-slider.js"></script>

如果plugins文件夹位于您应用的根目录中。我试图避免任何资源的目录../，因为路径更脆弱（将来会破坏链接对某些代码重组）。

Answer 2

Angular编译器刷新应用程序中的JS代码要包含任何JS代码，您需要将定义 filename.d.ts 与JS一起包含，并在filename.ts中的JS代码中声明要使用的所有变量。

Answer 3

我想您只需要从index.html剪切功能，并且必须粘贴到您要使用轮播的同一HTML的constructor。

假设您在app.component.html文件

中使用此功能

<input type="text" value="" class="slider form-control"
       data-slider-min="-200" data-slider-max="200"
       data-slider-step="5"  data-slider-orientation="horizontal"
       data-slider-selection="before" data-slider-tooltip="show"
       data-slider-id="yellow">

然后您需要在app.component.ts中使用此功能

declare var $: any;
@component({
....
})
export class AppComponent{
constructor(){
    /* BOOTSTRAP SLIDER */
    $('.slider').slider();
}
........
}

如何在angular2模板中导入javascript函数

3 个答案: