0

我一直在加载组件中工作，以便在从 API 调用和加载内容之间进行友好的等待。只是文本时没有问题，但是当信息有图像或更多信息时，加载组件在内容完全加载之前消失。

我查看了 Angular2 的生命周期钩子，但它们中的任何一个看起来都适合我的要求。

主要是我的组件了解 isLoading = true 何时必须消失。

这是我尝试做的方式。

ngOnInit() {
        // Payload to call the API
        var model: myPayload = {
            AuthorId: this._authorid,
            CountryId: this._countryid

        }
        // Api loading
        Observable.forkJoin(
            this._service.getList(model)
        )
            .subscribe(
            res => {
                this.authorList = res[0];
            },
            null,
            () => { 
                this.isLoading = false 
                }
            )
}
4

2 回答 2

1

没有办法让组件等待一个Promiseor Observable。

可以使路由器等待Observable与CanActivate守卫完成。

一个简单的解决方法是只添加*ngIf="data"视图中最外层的元素。

于 2016-06-26T10:28:14.407 回答
0

对于其他人，这就是您编写 canActivate 函数的方式。

在您的路由器中：

// all your imports go here

const APP_ROUTES: Routes = [
    { path: '', component: HomePageComponent, canActivate: [WaitForApiLoad] }
]

export const AppRouter = RouterModule.forRoot(APP_ROUTES);

创建一个新服务 WaitForApiLoad

// all your imports go here

@Injectable()
export class WaitForApiLoad implements CanActivate
{

    private dataFromApi: any;

    canActivate(activatedRouteSnapshot: ActivatedRouteSnapshot, 
            routerStateSnapshot: RouterStateSnapshot): Observable<boolean>  
    {

        return
            this.myApiService
                .getData()
                .map( data => {
                    this.dataFromApi = data;
                    return true;
                });
    }

}
于 2017-08-31T11:05:13.403 回答