等待可观察对象直到API加载了所有的信息



我一直在一个加载组件中工作,使内容被调用和从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 
                }
            )
}

没有办法让组件等待PromiseObservable

可以让路由器等待Observable完成CanActivate保护。

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

对于其他人,这是你如何编写你的canActivate函数

在你的路由器:

// all your imports go here
const APP_ROUTES: Routes = [
    { path: '', component: HomePageComponent, canActivate: [WaitForApiLoad] }
]
export const AppRouter = RouterModule.forRoot(APP_ROUTES);

创建新的服务waitforapilload

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

相关内容

  • 没有找到相关文章

最新更新