Come eseguire una funzione jquery in Angular 2 dopo il caricamento di ogni componente

Ho provato tutti i ganci del ciclo di vita ma non riesco a ottenere il risultato necessario. Il risultato di cui ho bisogno è l’triggerszione di una funzione che inizializza molti plug-in jquery utilizzati per elementi diversi su una singola pagina dopo che uno di questi elementi (componenti) è stato caricato.

Quindi diciamo che hai questa struttura.

Home Page Slider Widgets Rotatori di prodotti ..etc

Ognuno di questi elementi ha il proprio componente e tutti sono figli del componente principale della Home page.

E quello che mi serve qui è sapere quando sono caricati tutti i componenti figli e il componente genitore, quindi faccio scattare una funzione jquery per inizializzare ogni plugin sulla pagina.

Si vorrà utilizzare l’hook del ciclo di vita “ngAfterViewInit”, tramite l’importazione di AfterViewInit ( https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html#!#afterview ). Puoi usarlo come mostrato di seguito:

Installazione:

tsd install jquery --save 

o

  typings install dt~jquery --global --save 

Utilizzo:

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

Ecco un plunker per un esempio: http://plnkr.co/edit/KweZYO9hk9Dz8pqDK77F?p=info

Il modo più efficace che ho trovato è usare setTimeout con il tempo di 0 all’interno del costruttore di pagine / componenti. Ciò consente di eseguire jQuery nel successivo ciclo di esecuzione dopo che Angular ha completato il caricamento di tutti i componenti figlio.

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

Ha funzionato anche per me impostare il setTimeout all’interno del metodo ngOnInit.

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

che dire

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

altrimenti supporrei che ngAfterViewInit() del componente root sia un hook del ciclo di vita che corrisponde al tuo requisito ma hai affermato di aver già testato tutto …

aggiornare

bootstrap() o ngAfterViewInit() sul componente root può essere utilizzato solo per il caricamento iniziale. Per i componenti aggiunti in seguito è ansible utilizzare ngAfterViewInit() dei componenti aggiunti.

Ho avuto lo stesso problema qui. Ho trovato 2 soluzioni, anche se non sono le migliori:

1 – Implementare afterViewChecked per verificare se il plug-in jQuery viene avviato e quindi utilizzare una variabile per controllarne l’inizializzazione. Questo è il modo difficile perché afterViewChecked viene chiamato più volte.

2 – Ho modificato alcuni elementi da hide usando la proprietà nascosta invece di ngIf. Con hidden potrei inizializzare tutti i plugin jquery usando afterViewInit e farli funzionare anche se i miei oggetti sono nascosti.

setTimeout non ha funzionato quando si utilizza ngIf. Si innesca prima che il contenuto venga nuovamente sottoposto a rendering.

Una ansible soluzione sarebbe iscriversi su zone.onStable o zone.onMicrotaskEmpty

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

o

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

Guarda anche

  • Angular 2 chiama jQuery dopo il rendering degli elementi – dopo aver consumato l’API