Wie Funktion aufrufen, wenn HTML in ngFor geladen wird

Question

Ich versuche, eine jquery Slider-Bibliothek in meiner Angular2-Anwendung zu verwenden. Das Problem ist, dass ich neue Schieberegler dynamisch hinzufüge, und ich muss eine Funktion aufrufen, damit die Bibliothek den Schieberegler korrekt anzeigt.

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

Für den Moment, als ich es nennen, wenn ein neues Element hinzugefügt wird, aber das Problem ist, dass ich es nennen, bevor Angular2 tatsächlich die HTML aktualisiert.

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

Aber es ist nicht sehr sauber.

Ich möchte eine Möglichkeit zum Aufruf einer Funktion aus dem HTML, wenn es auf der Seite hinzugefügt wird. Etwas wie:

Ist es in Angular2 möglich? Oder gibt es einen besseren Weg, dies zu tun?

---

SOLUTION

Ich habe es mit Gilsdav Antwort zu arbeiten.

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

Aber ich habe einen Fehler, der bei der Verwendung von Jquery nicht aufgetreten ist. this.slider.slider is not a function

Answer 1

Machen Sie eine neue Komponente mit Code, der wie folgt aussehen:

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

Wie ich in Kommentar sagte, habe ich es nicht testen, aber das ist die gute Möglichkeit für mich.

Sie können hier Dokumente über Lebenszyklus und Kind Blick finden: http://learnangular2.com