typescript - Cómo renderizar los componentes padres después de que se complete el renderizado de los componentes hijos en Angular

Actualmente estoy desarrollando una página con el siguiente diseño usando Angular.

El problema es mostrar el componente padre cuando todos los subcomponentes del componente padre estén renderizados. La razón es que la longitud de todos los subcomponentes es dinámica, por lo que los cambios en el diseño ocurren con frecuencia. (Es difícil cambiar el esqueleto o el diseño.)

Sin embargo, cuando el *ngIf del padre es falso, el componente padre no puede renderizarse porque no ocurre el evento que se produce en el momento de la finalización del renderizado de los subcomponentes. Quiero saber cómo resolver esta situación.

A continuación se muestra un breve resumen de mi código. Soy un desarrollador principiante que no está familiarizado con Angular. Realmente quiero resolver este problema, así que por favor denme muchas opiniones.

// parent component template
<parent-component *ngIf="isAllChildLoaded">
 <childA (onLoad)="updateLoadState($event, 'childA')"/>
 <childB (onLoad)="updateLoadState($event, 'childB')"/>
 <childC (onLoad)="updateLoadState($event, 'childC)"/>
</parent-component>


// parent component ts

childALoaded = false;
childBLoaded = false;
childCLoaded = false;

get isAllChildLoaded() {
 return childALoaded && childBLoaded && childCLoaded
}

updateLoadState(event: boolean, type: string) {
  if (type === 'childA') this.childALoaded = true;
  if (type === 'childB') this.childBLoaded = true;
  if (type === 'childC') this.childCLoaded = true;
}


// all child component ts
@Output()
onLoad = new EventEmitter<boolean>();

ngAfterViewInit() {
  this.onLoad.emit(true);
}

Respuesta #1

Después de revisar en stackblitz, parece que el ngAfterViewInit del padre se dispara después de que todos los ngAfterViewInit de los hijos se han disparado, ¡así que puedes simplemente agregar la lógica en el ngAfterViewInit del padre!

stackblitz