使用 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);
}
}
child :
@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() {
}
}
当然,这给了我“ header 未定义”,因为 child 在呈现之前解析数据。我可以添加(页面 | 异步)吗?到所有变量,但这意味着在一个模板中有一堆异步调用,我理解这不是很好的做法。
将异步数据从父级传递给子级有什么最佳实践吗?我已经看到在某些地方使用了 ngOnChanges,但我也不确定这是否是正确的策略。
最佳答案
你可以使用
<div class="page-header" *ngIf="page">
或安全导航运算符(operator)
<source [srcset]="page?.header?.desktop" media="(min-width: 1024)">
关于angular - 在 Angular 中将异步数据从父级传递给子级,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42586224/