Javascript 在ngFor中加载html时如何调用函数

我正在尝试在Angular2应用程序中使用jquery滑块库。问题是，我动态添加了新的滑块，必须调用函数才能使库正确显示滑块

$( ".slider" ).each(function( index ) {
    $(this).slider();
    $(this).slider('setValue', $(this).attr("data-slider-value"))
});

目前，每当添加新元素时我都会调用它，但问题是我在Angular2实际更新html之前调用它

setTimeout(() => {
    $( ".slider" ).each(function( index ) {
        $(this).slider();
        $(this).slider('setValue', $(this).attr("data-slider-value"))
    });
}, 100);

但是它不是很干净

我想要一种在将函数添加到页面时从HTML调用函数的方法。比如：

<slider (onLoad)="loadSlider()"></slider>

slider.component.html

---

但是我有一个错误，在使用Jquery时没有发生

this.slider.slider不是函数

使用如下代码创建新组件：

@Component({
    selector: 'my-slider',
    template: '<slider #mySlider></slider>'
})
export class MySlider {
    @ViewChild('mySlider') slider: any; // can be ElementRef;

    ngAfterViewInit() {
        // slider is available
        this.slider.slider();
        let value = this.slider.attr("data-slider-value");
        this.slider.slider('setValue', value);
    }
}

@组件({
选择器：“我的滑块”，
模板：“”
})
导出类MySlider{
@ViewChild（'mySlider'）滑块：any；//可以是ElementRef；
ngAfterViewInit（）{
//滑块可用
this.slider.slider（）；
让value=this.slider.attr（“数据滑块值”）；
this.slider.slider（'setValue'，value）；
}
}

正如我在评论中所说，我没有测试它，但这对我来说是个好方法

---

您可以在此处找到有关生命周期和子视图的文档：

使用如下代码创建新组件：

@Component({
    selector: 'my-slider',
    template: '<slider #mySlider></slider>'
})
export class MySlider {
    @ViewChild('mySlider') slider: any; // can be ElementRef;

    ngAfterViewInit() {
        // slider is available
        this.slider.slider();
        let value = this.slider.attr("data-slider-value");
        this.slider.slider('setValue', value);
    }
}

@组件({
选择器：“我的滑块”，
模板：“”
})
导出类MySlider{
@ViewChild（'mySlider'）滑块：any；//可以是ElementRef；
ngAfterViewInit（）{
//滑块可用
this.slider.slider（）；
let value=this.slider.attr（“数据滑块值”）；
this.slider.slider（'setValue'，value）；
}
}

正如我在评论中所说，我没有测试它，但这对我来说是个好方法

---

您可以在此处找到有关生命周期和子视图的文档：

在这种情况下不适合您？您使用的是哪种项目？图像？@developer033我不想要材料设计，所以我没有尝试。我尝试了ng2 slider组件，但我无法使其与angular-cli一起工作。制作您自己的“ng slider”，实现AfterViewInit并使用@ViewChild而不是按类获取元素不起作用？抱歉，我暂时无法测试。如果您想使用@Input（）值，请使用[value]=“field.value”设置它。这个.slider.attr（“数据滑块值”）将被这个.value替换。在这种情况下对你不起作用？你在用什么样的东西？图像？@developer033我不想要材料设计，所以我没有尝试。我尝试了ng2 slider组件，但我无法使其与angular-cli一起工作。制作您自己的“ng slider”，实现AfterViewInit并使用@ViewChild而不是按类获取元素不起作用？抱歉，我暂时无法测试。如果您想使用@Input（）值，请使用[value]=“field.value”设置它。这个.slider.attr（“数据滑块值”）将替换为这个.value。您的方法正是我想要的！但是我在

这个.slider.slider（）部分有一个错误。它说
this.slider.slider不是函数
。我用新代码更新了我的问题。对不起，你能试试$（this.slider）.slider（）？太棒了！我用$（this.slider.nativeElement）实现了它。非常感谢你！我很高兴能帮上忙。你的方法正是我想要的！但是我在
这个.slider.slider（）部分有一个错误。它说
this.slider.slider不是函数
。我用新代码更新了我的问题。对不起，你能试试$（this.slider）.slider（）？太棒了！我用$（this.slider.nativeElement）实现了它。非常感谢你！我很高兴能帮上忙。
<input #mySlider
       class="slider"
       type="text"
       name="slider"
       data-provide="slider"
       data-slider-min="1"
       data-slider-max="3"
       [attr.data-slider-min]="min"
       [attr.data-slider-max]="max"
       data-slider-step="1"
       [attr.data-slider-value]="value"
       data-slider-tooltip="show"/>

@Component({
    selector: 'my-slider',
    template: '<slider #mySlider></slider>'
})
export class MySlider {
    @ViewChild('mySlider') slider: any; // can be ElementRef;

    ngAfterViewInit() {
        // slider is available
        this.slider.slider();
        let value = this.slider.attr("data-slider-value");
        this.slider.slider('setValue', value);
    }
}