Búsqueda de sitios web

javascript - ¿Cuándo se llama ngAfterViewInit de Angular2?


Necesito un código jQuery que se ejecute después de que la vista de mi componente Angular se haya inicializado para transformar los valores numéricos en estrellas.

Puse el código en la función ngAfterViewInit, pero no está haciendo lo que necesito. Puse un punto de interrupción en la función y veo que la mayor parte del HTML de mi componente ni siquiera se ha cargado cuando se llama a la función ngAfterViewInit. Las partes que no se han cargado se generan usando la directiva *ngFor.

¿Cómo puedo hacer que mi código se ejecute después de que esta directiva haya generado todo el HTML sobre el que necesito operar?

Respuesta #1

He estado usando ngAfterViewChecked cuando dependo de que el DOM esté listo.

import {Component, AfterViewChecked} from '@angular/core'; 

export class Spreadsheet implements AfterViewChecked{

   ngAfterViewChecked(){

   }
}

Respuesta #2

¿Cuándo se llama ngAfterViewInit?

ngAfterViewInit() debería llamarse después de que se hayan creado la vista de un componente y las vistas de sus hijos. Probé esto y descubrí que los ngAfterViewInit() de los hijos se llaman antes que el ngAfterViewInit() del padre.

Cuando dices "la mayor parte del HTML de mi componente ni siquiera se ha cargado", ¿qué quieres decir con "cargado"? ¿El HTML está en la plantilla del componente hijo, o se está cargando (o generando) por algún otro medio?

¿Cómo puedo hacer que mi código se ejecute después de que esta directiva haya generado todo el HTML sobre el que necesito operar?

Sería útil ver el código de la directiva. Si la directiva de alguna manera genera HTML que no está contenido en plantillas de Angular, entonces es posible que necesites activar manualmente un evento (por ejemplo, usando una propiedad de salida) para notificar al padre cuando se haya completado el renderizado. O podrías usar setTimeout() (pero eso no sería confiable).

Necesito un código jQuery que se ejecute después de que la vista de mi componente Angular se haya inicializado para transformar los valores numéricos en estrellas.

¿De dónde estás obteniendo estos valores numéricos? Si se cargan dinámicamente desde un servidor, podrías activar un evento cuando los datos lleguen y actualizar la vista en ese momento.

Además, ¿por qué no escribir un componente que tome un número como propiedad de entrada y genere estrellas usando NgFor?

Artículos relacionados