如何导入javascript函数在angular2 tamplate

我需要滑块和我用AdminLTE在我的项目如何导入javascript函数在angular2 tamplate

<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我在指数进口.html和最后的功能在我的模板输入后它不起作用在哪里以及如何输入此功能？我做了index.html但它不起作用

来源

2017-08-26 Gioli

什么AngularJs的版本？ –

您试图使用的JavaScript是jQuery，如果您不使用jQuery而不是该代码将无法工作。你可以告诉它是jQuery，因为$。

如果你在你的AngularJs应用程序使用jQuery比仔细检查

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

的实际加载。

这里是一个“普通的香草” Javascript实现，你可以，如果你不使用jQuery到位了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文件夹位于您的应用程序的根目录下。我试图避免为目录../的任何资源，因为路径更脆弱（成为断开的链接做一些代码重组在未来）。

来源

2017-08-26 19:26:29

我做了你的实现，它不起作用。 – Gioli

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

来源

2017-08-26 19:41:03

我想你只是需要削减你的功能从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-27 10:42:56

如何导入javascript函数在angular2 tamplate

回答

相关问题