Quiero representar un componente secundario en un elemento primario solo cuando el elemento secundario haya terminado una llamada http, pero no funciona para mí, el componente secundario no se muestra...
child selector in parent component <app-child-component *ngIf="alert" (alert)="propagar($evento)"></app-child-component > export class ParentComponent implements OnInit { alert = false; propagar(evento: boolean) { this.alert = evento; } export class ChildComponent implements OnInit { @Output alert = new EventEmitter<boolean>(); ngOnInit() { this.childComponentService.getSomething().subscribe(response => { if(this.response.code === 200) this.alerta.emit(true);//here I just want the child component to be displayed }) } }Pero no funciona, el componente hijo nunca se muestra a pesar de que el servicio responde correctamente
No puede hacerlo de esta manera porque el componente se procesará (es decir, se inicializará) solo una vez que la condición de *ngIf sea verdadera.
En cambio, sugiero manejarlo completamente dentro de su componente secundario, asignando la llamada HTTP observable a boolean una vez que finaliza la llamada HTTP, para determinar si el contenido del componente se debe representar o no.
Puedes intentar lo siguiente:
padre.componente.html
<app-child-component></app-child-component>child.component.ts
export class ChildComponent implements OnInit { ready$: Observable<boolean>; ngOnInit() { // Assign it to an observable to avoid handling subscribe/unsubscribe within the component class. ready$ = this.childComponentService .getSomething() .pipe(map((response) => response.code === 200)); } }niño.componente.html
<!-- Wrap all your child component template with ng-container --> <ng-container *ngIf="ready$ | async"> <!-- Your child components stuff here which will be rendered only once the HTTP call is completed --> </ng-container>Está utilizando una directiva estructural en un componente secundario. Si se establece en "falso" inicialmente, ni siquiera iniciará el componente secundario, por lo tanto, no se ejecutará ninguna llamada http en el elemento secundario. Lo que puede hacer es usar la propiedad "[oculta]" en lugar de "* ngIf" con el valor inicial establecido en verdadero. De esta manera, cuando el componente secundario emita un evento de salida, la propiedad enlazada con "oculto" puede configurarse como falsa y el componente secundario se verá en DOM.
child selector in parent component <app-child-component [hidden]="alert" (alert)="propagar($evento)"></app-child-component > export class ParentComponent implements OnInit { alert = true; propagar(evento: boolean) { this.alert = evento; } export class ChildComponent implements OnInit { @Output alert = new EventEmitter<boolean>(); ngOnInit() { this.childComponentService.getSomething().subscribe(response => { if(response.code === 200) this.alert.emit(false); }) } }Si desea acceder a la response del objeto de su suscripción, debe eliminarlo this. dentro de su declaración if.
this.childComponentService.getSomething().subscribe(response => { if(response.code === 200) // <<----- removed this. here this.alerta.emit(true); })