在Angular中将异步数据从父级传递给子级

Question

使用 Angularfire2，我正在尝试将从 Firebase 数据库检索到的对象从父级传递给子级：

家长：

@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);
  }

}

孩子：

@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() {
  }

}

当然，这给了我“标题未定义”，因为孩子在呈现之前解析数据。我可以添加（页面|异步）？到所有变量，但这意味着在一个模板中有一堆异步调用，我理解这不是很好的做法。

将异步数据从父级传递给子级的任何最佳实践？我已经看到在一些地方使用了 ngOnChanges，但我也不确定这是否是正确的策略。

Answer 1

你可以使用

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

或安全导航操作符

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