Angular 2 Komponente Router - Wie Ansicht Code

Ich bin mit dem Component-Router und der Routing-Teil funktioniert gut laufen. Aber ich kann nicht herausfinden, wie man JS ausführt, um die Vorlage zu ändern, sobald die Vorlage geladen wurde (und nicht vorher).Angular 2 Komponente Router - Wie Ansicht Code

Zum Beispiel möchte ich ausführen:

$(window).load(function() { 
    "use strict"; 
    $(".preloader").delay(350).fadeOut('slow'); 
});

Aber natürlich kann das nicht laufen, bis die preloader div geladen wird.

Was ist die beste Praxis, dies zu tun? Ich habe mit OnInit herumgespielt, aber es fühlte sich merkwürdig an, den Code der Benutzeroberfläche in den Controller zu ändern ... äh ... ich meine, Komponente.

Quelle

2016-07-29 Jelling

Die beste Praxis ist, jQuery zu vermeiden, wenn Sie Angular verwenden: http://stackoverflow.com/questions/14994391/thinking-in-angularjs- if-i-have-a-jquery-Hintergrund/15012542 # 15012542 –

sicher, aber in diesem Fall bin ich mit jemand anderes Template, so dass es ohne jquery Umschreiben würde ein wenig Arbeit. – Jelling

Ich würde sagen, css Animation versuchen.

Referenz Ihre .preloader mit ElementRef:

constructor(private _el: ElementRef) { 
    this.preloader = jQuery(this._el.nativeElement).find('.preloader'); 
}

Weitere Details hier: How to use jQuery with Angular2?

In AfterViewInit (https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html#!#afterview) tun setTimeout für 350 ms und Wechsel-Klasse etwas mit transition (Details https://stackoverflow.com/a/6943704/1267942)

Update: ab Angular 2 RC4 die Animation ist in ziemlich guter Form https://angular.io/docs/ts/latest/guide/animations.html (Ich habe es noch nicht versucht)

Quelle

2016-07-29 17:18:00

Danke. Für jeden, der dieses Problem hat, ging ich mit der jquery-Referenz aus AfterViewInit() vorläufig. – Jelling

Angular 2 Komponente Router - Wie Ansicht Code

Antwort

Verwandte Themen