等待 observable 直到 API 加载所有信息 Angular2答案

【问题标题】：Waiting for observable until API Load all the information Angular2等待 observable 直到 API 加载所有信息 Angular2
【发布时间】：2016-10-28 11:49:07
【问题描述】：

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

【问题讨论】：

标签： angular angular2-template angular2-directives angular2-components

【解决方案1】：

没有办法让组件等待Promise 或Observable。

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

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

【讨论】：

谢谢伙计，总是乐于助人！

【解决方案2】：

对于其他人，这就是您编写 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;
                });
    }

}

【讨论】：