如何在Angular 4中的依赖项注入之前从服务器加载路由配置

Question

我的顶部菜单模块对路线和模块一无所知，这些模块将用于菜单项，然后再加载API。

。

var routeConfig = [
            {loadChildren: "./widget1.ts#Widget1Module", path: "widget1.ts"},
            {loadChildren: "./widget2.ts#Widget2Module", path: "widget2.ts"},
            {loadChildren: "./widget3.ts#Widget3Module", path: "widget3.ts"}
      ]; // this must be loaded before AppRoutingModule inject
@NgModule({
imports: [
    RouterModule.forRoot(
      routeConfig
    )
  ],
  exports: [ RouterModule ]
})
export class AppRoutingModule { 
};

现在，我只使用RouteConfig作为全局变量，并在Angular Imports模块之前从纯JavaScript中提出请求。如何正确执行？

Answer 1

正如Gunter所说，我们可以延迟引导方法并传递某些参数。但在我的情况下，这是一个错误的方法。在Angular中，我们可以重新定义应用程序中的路由。因此，我们可以将routermodule的初始化参数空为空：

@NgModule({
  imports:      [ BrowserModule, RouterModule.forRoot([]), HttpModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

，但是在Web API后重新定义它们，以路由配置检索我们回调：

export class AppComponent implements OnInit { 
  constructor(private router: Router, private http: Http) {
  }
  public isLoaded : bool = false;
  ngOnInit() {
    this.http.get('app/routerConfig.json')
               .map((res:any) => res.json())
               .subscribe(data => {
                 this.router.resetConfig(data);
                 this.isLoaded = true;
               }, error => console.log(error));
  }
}

这是Plunker中的一个示例。