Как вызвать функцию, когда html загружен в ngFor

Question

Я пытаюсь использовать библиотеку слайдера jQuery в своем приложении Angular2. Проблема в том, что я динамически добавляю новые слайдеры, и я должен вызвать функцию, чтобы библиотека отображала слайдер правильно.

$(".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> 

Возможно ли это в 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