text Angular 2如何使子组件等待异步数据准备就绪

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了text Angular 2如何使子组件等待异步数据准备就绪相关的知识,希望对你有一定的参考价值。

There are three ways to do this:

1) Put an *ngIf in parent. Only render child when parent's items is ready.
<div *ngIf="items">
   <child [items]="items | async">
</div>

2) Separate your input getter setter in child. Then act whenever the value is set, you can use RxJS BehaviorSubject also.
private _items = new BehaviorSubject<Items[]>([]);
@Input() set items(value: Items[]) { 
    this._items.next(value); 
}
get items() {
   return this._items.getValue();
}
ngOnInit() {
    this._items.subscribe(x => {
       this.chunk(x);
    })
}

3) Do it during the ngOnChanges of the child.
Refer to here for example. https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html#!#onchanges

以上是关于text Angular 2如何使子组件等待异步数据准备就绪的主要内容,如果未能解决你的问题,请参考以下文章

等待异步函数在 Angular 中完成

Angular2 - 将 ASYNC 数据传递给子组件

Angular 2 - 如何在等待 http 请求完成时阻止 GUI 渲染

角度组件 - 如何避免嵌套组件

如何使子组件使用父组件样式[重复]

Angular 2 的异步加载路由数据和构建路由指令