禁用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本质上只是一个路由器出口，重定向到其他路由，由多个子模块定义）。 我可以“禁用”或重定向到错误页面，而不是加载请求路由定义的模块/组件吗？

- billias

---

在 AppComponent 中检查参数。如果参数符合预期，则让应用程序运行，否则跳转到错误页面... - micronyks

是的，但是在哪里呢？AppComponent模板只有<router-outlet></router-outlet>。我尝试用*ngIf来封装它，但是我收到了一个错误“Error: Cannot find primary outlet to load ChildComponent”。你是指添加一个ngOnInit()函数并在其中执行检查吗？ - billias

Answer 1

为了禁用页面的初始路由，并让它根据您的配置服务进行处理，您需要在您的AppRoutes对象中将initialNavigation设置为false：

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

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

在您的ConfigurationService中，您需要注入router，并根据您的配置使用它进行导航。

另一个选项是使用canActivate路由钩子。在这个钩子中，您可以注入ConfigurationService并让它确定是否可以加载此页面。

---

更新

对于Angular的最新版本，initialNavigation的false值已被弃用，请改用'disabled'代替：

{ initialNavigation : 'disabled' }

- Poul Kruijt

---

谢谢，我之前不知道有{initialNavigation : false}这个选项。 - billias

+1 真是一个很棒的功能，感谢 Angular 团队让我们知道了。有没有相关的文档或参考链接呢？ - Pankaj Parkar

@PankajParkar 我已经添加了一个 API 链接。我认为它还没有在文档中。 - Poul Kruijt

@PierreDuc 谢谢，伙计，这对其他人也会有帮助 :) - Pankaj Parkar