javascript - ngaftercontentinit - viewchild angular 4 example

¿Cuándo se llama Angular2 ngAfterViewInit?

Question

Necesito algo de código jQuery para ejecutarlo después de que mi vista del 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. Establecí un punto de interrupción en la función y veo que la mayoría 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 en el que necesito operar?

Answer 1

¿Cuándo se llama a ngAfterViewInit?

ngAfterViewInit() debe llamar a ngAfterViewInit() después de la vista de un componente, y se crean las vistas de los niños. ngAfterViewInit() esto y encontré que se ngAfterViewInit() los ngAfterViewInit() los niños antes del ngAfterViewInit() los padres.

Cuando dices "la mayoría del HTML de mi componente ni siquiera se ha cargado", ¿qué quieres decir con "cargado"? ¿Está el HTML en la plantilla del componente secundario, o está siendo cargado (o generado) 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 en el que necesito operar?

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

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

¿De dónde obtienes estos valores numéricos? Si se cargan dinámicamente desde un servidor, podría desencadenar un evento cuando lleguen los datos y actualizar la vista en ese punto.

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

Answer 2

He estado usando ngAfterViewChecked cuando confío en que el DOM esté listo.

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

export class Spreadsheet implements AfterViewChecked{

   ngAfterViewChecked(){

   }
}