htmlがngForでロードされたときに関数を呼び出す方法

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で可能ですか？それとももっと良い方法がありますか？

---

SOLUTION

私は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