Pass asynchroner Daten von Eltern auf das Kind in Angular

Question

Mit Angularfire2, ich versuche, ein Objekt aus der db Firebase abgerufen, um von Eltern auf das Kind:

Parent:

@Component({ 
    selector: 'app-page', 
    styleUrls: ['./page.component.scss'], 
    template: ` 
    <app-page-render [page]="page"></app-page-render> 
    `, 
}) 
export class PageComponent implements OnInit { 
    slug: string; 
    page: FirebaseObjectObservable<Page>; 

    constructor(private af: AngularFire, private route: ActivatedRoute) { 
    } 

    ngOnInit() { 
    this.route.params 
     .switchMap((params: any) => this.af.database.object(`/pages/${params['page-slug']}`)) 
     .subscribe(page => this.page = page); 
    } 

} 

Kind:

@Component({ 
    selector: 'app-page-render', 
    styleUrls: ['./page-render.component.scss'], 
    template: ` 
    <div class="page-header"> 
     <div class="page-banner"> 
     <picture> 
      <source [srcset]="page.header.desktop" media="(min-width: 1024)"> 
      <source [srcset]="page.header.tablet" media="(min-width: 768px)"> 
      <img [src]="page.header.mobile" [alt]="page.header.alt" class="page-banner--image"> 
     </picture> 
     <h1 class="page-banner--heading">{{page.header.title}}</h1> 
     <div> 
    </div> 
    <main class="main-container"> 
     <div [innerHTML]="page.content"></div> 
    </main> 
    ` 
}) 
export class PageRenderComponent implements OnInit { 
    @Input() 
    page: any; 

    constructor() { } 

    ngOnInit() { 
    } 

} 

Natürlich gibt mir das "Header ist undefined", weil das Kind die Daten vor dem Rendern löst. Ich könnte hinzufügen (Seite | async)? zu allen Variablen, aber das bedeutet, es gibt eine Reihe von Async-Aufrufen in der einen Vorlage, die ich verstehe, ist nicht sehr gute Praxis.

Bestmögliche Vorgehensweise zum Übergeben asynchroner Daten von übergeordneten an untergeordnete Elemente? Ich habe ngOnChanges an Orten gesehen, aber ich bin mir nicht sicher, ob das die richtige Strategie ist.

Answer 1

können Sie

<div class="page-header" *ngIf="page"> 

oder der Safe-Navigation

Betreiber

<source [srcset]="page?.header?.desktop" media="(min-width: 1024)">