angular - 在 Angular2 中禁用应用程序加载/路由

Question

我有一个 angular2 应用程序(RC6 版本)，其中一些重要的全局参数是使用在启动时收集此文件的服务从配置文件加载的:

@NgModule({
imports:  [ BrowserModule, FormsModule, HttpModule, AppRoutes, SomeCustomModule ],
declarations: [ AppComponent ]
providers: [
            ConfigurationService,
            {
              provide: APP_INITIALIZER,
              useFactory: (config: ConfigurationService) => () => { 
                             return config.load().then(configParams=> { return true;});      
                          },
              deps: [ConfigurationService, HttpModule],
              multi: true
            }
          ],
bootstrap:[ AppComponent ]
})
export class AppModule { }

如该片段所示，我使用了我称之为 ConfigurationService 的东西，它通过 http 调用读取配置文件并返回一些参数(作为 Promise)。如果一切顺利，应用程序将完美加载，并且这些配置参数可在整个子模块等中访问。

问题是，如果这个配置文件没有按预期加载，我如何才能阻止应用程序加载子模块？ (请注意 AppComponent 本质上只是一个路由器导出，重定向到其他路由，由多个子模块定义)。我可以“禁用”或重定向到错误页面而不是加载由请求的路由定义的模块/组件吗？

Answer 1

要禁用页面的初始路由，并让它根据您的 ConfigurationService 进行处理，您必须设置 initialNavigation在您的 AppRoutes 对象中设置为 false:

export const AppRoutes = RouterModule.forRoot(ROUTES, {initialNavigation : false});

在您的 ConfigurationService 中，您必须注入(inject) router 并使用它根据您的配置进行导航。

另一种选择是使用canActivate 路由 Hook 。在此 Hook 中，您可以注入(inject) ConfigurationService 并让它确定是否可以加载此页面。

---

更新

对于最新版本的 Angular，initialNavigation 的 false 值已弃用，请改用 'disabled':

{ initialNavigation : 'disabled' }