-1

我需要滑块，并且在我的项目中使用 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 中做到了，但它不起作用

4

3 回答 3

0

我想你只需要从你要使用轮播的地方剪切你的功能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();
}
........
}
于 2017-08-27T10:42:56.030 回答
0

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

于 2017-08-26T19:41:03.943 回答
0

您尝试使用的 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>

如果插件文件夹位于您的应用程序的根目录。我尽量避免../使用任何资源的目录，因为路径更脆弱（成为损坏的链接会在将来对某些代码进行重组）。

于 2017-08-26T19:26:29.497 回答