Comment exécuter une fonction jquery dans Angular 2 après le chargement de chaque composant

J’ai essayé tous les crochets du cycle de vie mais je n’arrive pas à obtenir le résultat souhaité. Le résultat dont j’ai besoin est de déclencher une fonction qui initialise de nombreux plugins jquery utilisés pour différents éléments sur une seule page après le chargement de chacun de ces éléments (composants).

Alors disons que vous avez cette structure.

Page d’accueil Curseurs Widgets Produit rotateurs ..etc

Chacun de ces éléments a son propre composant et tous sont des enfants du composant parent de la page d’accueil.

Et ce dont j’ai besoin ici, c’est de savoir quand tous les composants enfants et le composant parent sont chargés. Par conséquent, je déclenche une fonction jquery pour initialiser chaque plugin de la page.

Vous voudrez utiliser le hook de cycle de vie “ngAfterViewInit”, en important AfterViewInit ( https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html#!#afterview ). Vous pouvez l’utiliser comme indiqué ci-dessous:

Installation:

tsd install jquery --save

  typings install dt~jquery --global --save

Utilisation:

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

Voici un exemple pour un exemple: http://plnkr.co/edit/KweZYO9hk9Dz8pqDK77F?p=info

Le moyen le plus efficace que j’ai trouvé est d’utiliser setTimeout avec un temps égal à 0 à l’intérieur du constructeur de la page / du composant. Cela permet à jQuery de s’exécuter dans le prochain cycle d’exécution une fois qu’Angular a fini de charger tous les composants enfants.

 export class HomePage { constructor() { setTimeout(() => { // run jQuery stuff here }, 0); } }

Mettre la méthode setTimeout dans la méthode ngOnInit a également fonctionné pour moi.

 export class HomePage { ngOnInit() { setTimeout(() => { // run jQuery stuff here }, 0); } }

qu’en est-il de

 bootstrap(...).then(x => { ... })

sinon, je supposerais que ngAfterViewInit() de votre composant racine est un crochet de cycle de vie qui correspond à votre exigence, mais vous avez déclaré que vous avez déjà tout testé …

mettre à jour

bootstrap() ou ngAfterViewInit() sur le composant racine ne peuvent être utilisés que pour le chargement initial. ngAfterViewInit() des composants ajoutés peut être utilisé pour les composants ajoutés ultérieurement.

J’ai eu le même problème ici. J’ai trouvé 2 solutions, même si elles ne sont pas les meilleures:

1 – Implémentez afterViewChecked pour vérifier si le plug-in jquery est lancé, puis utilisez une variable pour contrôler son initialisation. C’est la manière la plus difficile car afterViewChecked est appelé plusieurs fois.

2 – J’ai changé certains éléments pour qu’ils soient cachés en utilisant une propriété cachée au lieu de ngIf. Avec hidden, je pourrais initialiser tous les plugins jquery en utilisant afterViewInit et les faire fonctionner même si mes objects sont masqués.

setTimeout ne fonctionnait pas avec ngIf. Cela se déclenche avant que le contenu ne soit rendu à nouveau.

Une solution possible serait de s’abonner sur zone.onStable ou zone.onMicrotaskEmpty

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

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

Voir également

Angular 2 appelle jQuery après le rendu des éléments – après avoir consommé l’API