instalar - Cómo ejecutar una función jquery en Angular 2 después de que cada componente termine de cargarse

jquery angular 6

Question

He probado todos los anzuelos del ciclo de vida pero no puedo lograr el resultado necesario. El resultado que necesito es activar una función que inicializa muchos plugins de jquery utilizados para diferentes elementos en una sola página después de cargar cada uno de estos elementos (componentes).

Entonces digamos que tienes esta estructura.

Página de inicio Slider Widgets Producto rotators ..etc

Cada uno de estos elementos tiene su propio componente y todos son secundarios del componente principal de la página de inicio.

Y lo que necesito aquí es saber cuándo se cargan todos los componentes secundarios y el componente principal, de modo que active una función jquery para inicializar cada complemento en la página.

Answer 1

Deberá utilizar el enlace de ciclo de vida "ngAfterViewInit", mediante la importación de AfterViewInit ( https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html#!#afterview ). Puede usarlo como se muestra a continuación:

Instalación:

    tsd install jquery --save

o

    typings install dt~jquery --global --save

Utilización:

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

Aquí hay un plunker para un ejemplo: http://plnkr.co/edit/KweZYO9hk9Dz8pqDK77F?p=info

Answer 2

La forma más efectiva que he encontrado es usar setTimeout con tiempo de 0 dentro del constructor de página / componente. Esto permite que jQuery se ejecute en el próximo ciclo de ejecución después de que Angular haya terminado de cargar todos los componentes secundarios.

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

Poner el setTimeout dentro del método ngOnInit también me ha funcionado.

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

Answer 3

Tuve el mismo problema aquí. Encontré 2 soluciones, incluso ellas no son las mejores:

1 - Implemente afterViewChecked para verificar si se inició el plugin jquery y luego use una variable para controlar su inicialización. Este es el camino difícil porque afterViewChecked se llama muchas veces.

2 - Cambié algunos elementos para ocultarlos usando la propiedad oculta en lugar de ngIf. Con hidden podría inicializar todos los plugins de jquery usando afterViewInit y hacer que funcionen incluso si mis objetos están ocultos.

setTimeout no funcionó cuando se usa ngIf. Se desencadena antes de volver a procesar el contenido.

Answer 4

Una posible solución sería suscribirse en 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();
    });
  });
}

Ver también

• Angular 2 llamando jQuery después de renderizar elementos - después de consumir API

Answer 5

qué pasa

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

de lo contrario, supondría que ngAfterViewInit() de tu componente raíz es un gancho de ciclo de vida que coincide con tus necesidades, pero dijiste que ya lo has probado ...

actualizar

bootstrap() o ngAfterViewInit() en el componente raíz solo se pueden usar para la carga inicial. Para los componentes añadidos posteriormente, se puede usar ngAfterViewInit() de los componentes agregados.