He intentado de todo el ciclo de vida de los ganchos, pero no se puede lograr el resultado requerido.
El resultado que necesito es la activación de una función que inicializa muchos plugins de jquery se utiliza para los diferentes elementos en una sola página después de cada uno de estos elementos (componentes) se carga.

Así que digamos que usted tiene esta estructura.

Página De Inicio
Control deslizante
Los Widgets
Producto rotadores
..etc

Cada uno de estos elementos tiene su propio componente y todos son hijos de la página principal componente de los padres.

Y lo que tengo aquí es saber cuando todos los niños de los componentes y el componente primario es cargado así que desencadenan una función jquery para inicializar cada plugin en la página.

  • habéis encontrado alguna solución a este problema?

5 Comentarios

  1. 25

    Usted desea utilizar el «ngAfterViewInit de» ciclo de vida de gancho, a través de la importación de AfterViewInit (https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html#!#afterview). Se puede utilizar 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í es un plunker para ver un ejemplo:
    http://plnkr.co/edit/KweZYO9hk9Dz8pqDK77F?p=info

    • Error: Cannot find name '$' Angular 2 Final
    • Parece que ahora tiene que declarar el signo de dólar.
    • Estoy teniendo un problema con ngAfterViewInit con jquery porque cuando trato de los elementos de destino que no están allí : ngAfterViewInit() { console.log($(‘#startDateTimeFilter, #endDateTimeFilter).longitud); } Muestra 0 en lugar de 2.
    • ¿Tiene un final apóstrofo en el código, le falta uno aquí. He creado un plunker que obtiene la longitud de un div y devuelve 1. Ver aquí: plnkr.co/editar/KweZYO9hk9Dz8pqDK77F
    • Si usted tiene dependencia que depende de Jquery que usted debe poner "scripts": [ "node_modules/jquery/dist/jquery.js", a su angular.json archivo angular 6+
  2. 16

    La manera más efectiva que he encontrado es usar setTimeout con un tiempo de 0 dentro de la página/componente constructor. Este vamos a jQuery ejecutar en la siguiente ejecución del ciclo después de Angular se ha terminado de cargar todos los componentes hijos.

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

    Poner el setTimeout dentro de ngOnInit método también ha trabajado para mí.

    export class HomePage {
        ngOnInit() {
            setTimeout(() => {
                //run jQuery stuff here
            }, 0);
        }
    }
    • Esto funciona para mí, pero se siente muy chapucero! Hay una actualización de una «correcta» forma de hacer esto?
    • Esto funciona para mí, demasiado! Genial!
    • Tiempo de espera = 0 no trabajo para mí, pero el tiempo de espera = 1 hizo.
    • Es este javascript bucle de eventos de magia?)
    • No estoy usando JQuery pero en el documento.querySelector(). Yo había estado haciendo girar mis ruedas durante horas hasta que me encontré con esto. Gracias!
    • Gracias por la sugerencia. A mí me funcionó… parece Que debe ser capaz de acceder a la catedral en «AfterViewInit» función sin este hack, sin embargo.

  3. 4

    lo que acerca de

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

    de lo contrario sería asumir ngAfterViewInit() de su componente de la raíz a ser un ciclo de vida de gancho que coincida con el requisito, pero se declaró probado de todo ya …

    actualización

    bootstrap() o ngAfterViewInit() en el componente de la raíz sólo puede ser utilizado para la carga inicial. Para más adelante se agregan los componentes de la ngAfterViewInit() de los componentes añadidos pueden ser utilizados.

    • Lo intenté, pero estos eventos fuego antes de que no hay nada en la página, por ejemplo, he intentado activar una alerta, tanto de ellos y llegué a este resultado. postimg.org/image/8qv5tqei9 como se puede ver no hay nada todavía en la página. Quiero inicializar los plugins de jquery después de todo lo que en la página se ha cargado completamente. ninguno de la vida ganchos parece hacer el truco.
    • No he comprobado bootstrap.entonces, pero eso no puede ser cierto para ngAfterViewInit
    • No me funciona tampoco. Ni bootstrap(…).entonces() idea, ni ngAfterViewInit() gancho de componente de la raíz. Lo que funcionó para mí fue la incorporación del plugin de jquery inicialización en cada una de las hojas del componente ngAfterViewInit de cada ruta.
  4. 1

    Tuve el mismo problema aquí. He encontrado 2 soluciones, aunque no son los mejores:

    1 – Implementar afterViewChecked para comprobar si el plugin de jquery se inicia y, a continuación, utilizar una variable para el control de su inicialización. Esta es la manera difícil porque afterViewChecked es llamado muchas veces.

    2 – he cambiado algunos elementos que se oculta mediante ocultos de la propiedad en lugar de ngIf. Con hidden podría inicializar todos los plugins de jquery usando afterViewInit y hacer que el trabajo de mi, incluso los objetos están ocultos.

    setTimeout no funciona cuando se utiliza ngIf. Se activa antes de que el contenido se vuelve a presentar.

Dejar respuesta

Please enter your comment!
Please enter your name here