Wie führe ich eine jquery-Funktion in Angular 2 aus, nachdem jede Komponente geladen wurde?

Habe ich versucht, alle life-cycle-Haken, kann aber nicht bekommen, um zu erreichen das gewünschte Ergebnis.
Das Ergebnis, das ich brauche, ist das auslösen einer Funktion die initialize viele jquery-plugins verwendet, die für verschiedene Elemente auf einer einzigen Seite, nach der jeder einzelne diese Elemente (Komponenten) wird geladen.

So können sagen, Sie haben diese Struktur.

Startseite
Regler
Widgets
Produkt-Rotatoren
..etc

Jedes dieser Elemente hat eine eigene Komponente und alle Kinder sind von der Homepage übergeordneten Komponente.

Und was ich hier brauchen, ist zu wissen, wenn alle Kinder die Komponenten und der übergeordneten Komponente geladen wird, damit ich die trigger eine jquery-Funktion zum initialisieren jedes plugin auf der Seite.

InformationsquelleAutor der Frage Joseph Assem Sobhy | 2016-03-01

Werden Sie wollen, verwenden Sie die "ngAfterViewInit" lifecycle-Haken, durch den Import AfterViewInit (https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html#!#afterview). Sie können es verwenden, wie unten gezeigt:

Installation:

    tsd install jquery --save

oder

    typings install dt~jquery --global --save

Auslastung:

    import { Component, AfterViewInit } from '@angular/core';
    import * as $ from 'jquery';

    ngAfterViewInit() {
        this.doJqueryLoad();     
        this.doClassicLoad();

        $(this.el.nativeElement)
            .chosen()
            .on('change', (e, args) => {
                this.selectedValue = args.selected;
            });
    }

    doClassicLoad() {
      //A $( document ).ready() block.
      $( document ).ready(function() {
          console.log( "Unnecessary..." );
      });      
    }

    //You don't need to use document.ready... 
    doJqueryLoad() {
        console.log("Can use jquery without doing document.ready")
        var testDivCount = $('#testDiv').length;
        console.log("TestDivCount: ", testDivCount);
    }

Hier ist ein plunker für ein Beispiel:
http://plnkr.co/edit/KweZYO9hk9Dz8pqDK77F?p=info

InformationsquelleAutor der Antwort Dan Weber

15

Der effektivste Weg, die ich gefunden habe, ist die Verwendung von setTimeout mit der Zeit von 0 innerhalb der Seite/component-Konstruktor. Dieses mal das jQuery-Lauf im nächsten Programmzyklus nach Winkel vollständig geladen wurde, werden alle untergeordneten Komponenten.
```
export class HomePage {
    constructor() {
        setTimeout(() => {
            //run jQuery stuff here
        }, 0);
    }
}
```
Setzen setTimeout innerhalb von ngOnInit Methode hat auch für mich gearbeitet.
```
export class HomePage {
    ngOnInit() {
        setTimeout(() => {
            //run jQuery stuff here
        }, 0);
    }
}
```
InformationsquelleAutor der Antwort Urgo
4

was
```
bootstrap(...).then(x => {
  ...
})
```
ansonsten würde ich davon ausgehen ngAfterViewInit() deiner root-Komponente, die ein lifecycle-Haken entspricht Ihren Anforderungen, aber Sie erklärte, dass Sie getestet alle schon ...

update

bootstrap() oder ngAfterViewInit() auf das root-Element kann nur verwendet werden, für das erste laden. Für später hinzugefügte Komponenten der ngAfterViewInit() von den zusätzlichen Komponenten genutzt werden können.

InformationsquelleAutor der Antwort Günter Zöchbauer
1

Ich hatte das gleiche problem hier. Ich fand 2 Lösungen, auch Sie sind nicht die besten:

1 - Umsetzung afterViewChecked um zu überprüfen, ob jquery-plugin initiiert wird, und dann verwenden Sie eine variable zur Steuerung der Initialisierung. Das ist der harte Weg, weil afterViewChecked ist viele Male aufgerufen.

2 - ich veränderte einige Elemente, die ausgeblendet werden mit hidden-Eigenschaft anstelle von ngIf. Mit versteckten konnte ich initialisieren Sie alle jquery-plugins mit afterViewInit und machen Sie die Arbeit selbst meine Objekte ausgeblendet werden.

setTimeout nicht die Arbeit, wenn Sie ngIf. Es löst, bevor der Inhalt neu dargestellt.

InformationsquelleAutor der Antwort Cristal Embalagens

Eine mögliche Lösung wäre die Anmeldung auf zone.onStable oder zone.onMicrotaskEmpty

ngAfterViewInit() {
  this.zone.onStable.first().subscribe(() => {
    debugger;
  });
}

oder

ngOnInit() {
  this.service.getData().subscribe(() => {
    this.data = data;
    this.zone.onMicrotaskEmpty.first().subscribe((data) => {
      $(someElem).plugin();
    });
  });
}