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

Question

我一直在一个加载组件中工作，以便在从 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 
                }
            )
}

Answer 1

无法让组件等待 Promise 或 Observable。

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

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

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

}

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

Waiting for observable until API Load all the information Angular2

angular2-directives

angular2-template

angular2-components

angular