Por que los datos de mi hijo component aparecen vacios Angular

Question

Hola tengo un componente padre y un componente hijo, el cual le coloco datos a traves de un @Input() al hijo, pero cuando hago un imprimo en mi ngOnInit o mi ngAfterViewInit los datos me aparecen como un arreglo vacio, pero en mi html o despues de un SetTimeOut si me aparecen datos. A que se debe esto? Este es mi codigo:

export class SidebarComponent implements OnInit, AfterViewInit {
  @Input() data: Data[];
  constructor() { 
    console.log(data) // Da como resultado []
}
  ngOnInit(): void { 
    console.log(data) // Da como resultado []
}
  ngAfterViewInit() {
    console.log(data) // Da como resultado []
    setTimeout(() => {
    console.log(data) // Da como resultado mi objeto
    },2000);
  }
  
}

Aqui esta como envio la data en el componente padre

<app-sidebar [data]="data"></app-sidebar>

angular typescript

Pablo Lozano · Answer

Para sacar el máximo rendimiento a Angular, necesitamos conocer el ciclo de vida de sus componentes. Cuando se muestra un componente:

se llama al constructor de su clase.
se llama al método ngOnChanges (si se ha implementado) si tu componente tiene inputs y estos varían.
se llama al método ngOnInit, donde se deben obtener datos de los servicios asociados al componente
se muestra el componente (su vista), generando el DOM y todos los event listeners asociados.

Hay más pasos (y métodos asociados) pero no es necesario para esta respuesta exponerlos y generalmente no son implementados.
El escenario que tenemos es que tu componente padre, para pasar los datos al componente hijo, necesita obtenerlos primero. Seguramente lo hará en su método ngOnInit a través de un servicio.
Generalmente esto implica una llamada asíncrona resuelta con un Observable. Por tanto, mientras la respuesta es obtenida, el componente hijo tiene un input (data) vacío, porque el padre aún no ha obtenido los datos. Una vez que el componente padre ha obtenido los datos, estos son compartidos con el hijo.
Tu componente hijo no implementa ngOnChanges(), lo que te permitiría detectar el momento en el que los datos son añadidos sin necesidad de usar setTimeout.

Por que los datos de mi hijo component aparecen vacios Angular

One Answer

Add your own answers!

Ask a Question