如何導入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

回答

相關問題