Question

我正在尝试在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添加到页面时从HTML调用函数的方法。类似的东西：

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

Angular2有可能吗？或者有更好的方法吗？

解

我得到了Gilsdav的回答。

form.component.html

<app-slider [min]="field.min" [max]="field.max" [value]="field.min"></app-slider>

slider.component.ts

import {Component, ViewChild, Input} from '@angular/core';

declare var $ : any;

@Component({
    selector: 'app-slider',
    templateUrl: './slider.component.html',
    styleUrls: ['./slider.component.css']
})
export class SliderComponent{
    @ViewChild('mySlider') slider: any; // can be ElementRef;
    @Input() min: number;
    @Input() max: number;
    @Input() value: number;

    constructor() { }

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

slider.component.html

<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"/>

但是我有一个错误，在使用Jquery时没有发生。 this.slider.slider is not a function

Answer 1

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

@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);
    }
}

就像我在评论中说的那样，我没有对它进行测试，但这对我来说是好方法。

您可以在此处找到有关生命周期和子视图的文档：http://learnangular2.com

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

1 个答案: