Question

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

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

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

这是我尝试这样做的方式。

use Artisan;

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

}

等待可观察直到API加载所有信息Angular2

2 个答案: