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

}

当然这给了我＆＃34;标题未定义＆＃34;因为孩子在渲染之前正在解析数据。我可以添加（页面|异步）？所有变量，但这意味着在一个模板中有一堆异步调用，我理解这不是一个很好的实践。

将异步数据从父级传递给子级的最佳做法是什么？我已经看过在某些地方使用ngOnChanges，但我也不确定这是不是正确的策略。

Answer 1

您可以使用

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

或安全导航操作员

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

在Angular中将父节点之间的异步数据传递给子节点

1 个答案: