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

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 个我在索引中导入.html输入后我的模板中的最后一个函数 它不起作用 我在哪里以及如何输入此功能？我在索引中做到了.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>

实际正在加载。

下面是一个"普通的"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>

如果插件文件夹位于应用的根目录下。我尽量避免对任何资源进行目录../，因为路径更脆弱(将来会成为某些代码重组的断开链接(。

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();
}
........
}