路由器插座的Angular 2延迟渲染

Question

我正在开发一个具有多个组件的 Angular 2 应用程序，这些组件依赖于通过 http 服务从服务器加载的一些数据（它是关于用户及其角色的数据）。

如果此数据尚未加载，我的大多数路由组件都会在其 ngOnInit() 方法中抛出错误。数据被加载并存储在注入所有组件的服务中。

有没有办法在我的根组件中延迟渲染当前路由，直到 http 调用完成？

否则我将不得不在所有路由组件的 ngOnInit 中实现某种检查和重试机制，这将非常尴尬。

我已经尝试在调用完成之前隐藏 router-outlet 元素，但这会导致错误提示“无法找到要加载 xxx 的主出口”

Answer 1

创建Router模块时有一个延迟Router初始导航的选项：

RouterModule.forRoot([
    // routes here
], {
    initialNavigation: false // the propery to delay navigation
}),

稍后可以通过 Angular Router 触发初始导航，如下所示：

this.router.initialNavigation();

Answer 2

我使用 CanActivate 守卫完成了这项工作。使其工作的关键是从 canActivate 方法返回一个 Observable。这样，您可以根据需要延迟。

import { CanActivate } from '@angular/router';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Rx';
import { StateService } from '../../_services/state.service';
import { Subject } from 'rxjs/Rx';
import { Subscription } from 'rxjs/Subscription';

@Injectable()
export class LoadingGuard implements CanActivate {
    constructor(private state: StateService) {}

    public canActivate(): Observable<boolean> {
        if (!this.state.loading$.getValue()) { 
            return Observable.of(true); 
        }

        let subject = new Subject<boolean>();
        let subscription = this.state.loading$.subscribe(value => {
            if (!value) {
                subject.next(true);
                subject.complete();

                subscription.unsubscribe();
            }
        });

        return subject;
    }
}

上面，StateService 是一个服务，它评估当前用户并为应用程序的其余部分预缓存一些数据。它有一个名为 loading$ 的主题，加载完成后返回 false。

剩下的就是在应用模块中声明守卫。

import { LoadingGuard } from './app/loading-guard/loading-guard';
// other imports omitted

@NgModule({
    // other module properties omitted
    providers: [LoadingGuard]
})
export class AppModule {}

然后在你的路由中声明守卫。

import { LoadingGuard } from './app/loading-guard/loading-guard';
// other imports omitted

export const rootRouterConfig: Routes = [
    { path: 'app', component: AppComponent, 
      canActivate: [LoadingGuard], 
      children: [
        { path: 'index', component: IndexComponent },
        // child routes omitted
      ] },
    { path: 'sign-in', component: SignInComponent },
    { path: '**', redirectTo: 'sign-in' }
];

作为参考，这里是关于 CanActivate 的文档： https://angular.io/docs/ts/latest/api/router/index/CanActivate-interface.html