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

【问题标题】：How to load route configuration from server before dependency injection in angular 4?如何在 Angular 4 中的依赖注入之前从服务器加载路由配置？
【发布时间】：2017-04-29 13:23:04
【问题描述】：

我的顶部菜单模块对路由和模块一无所知，它们将在从 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 作为全局变量，并在角度导入模块之前从纯 javascript 发出请求。如何正确操作？

【问题讨论】：

parameters-rendered-from-backend-to-angular2-bootstrap-method

标签： javascript angular routing angular2-router

【解决方案1】：

正如 Gunter 所说，我们可以延迟引导方法并传递一些参数，例如that。但就我而言，这是一种错误的方式。在 Angular 中，我们可以在应用程序中重新定义路由。所以我们可以将RouterModule的初始化参数留空：

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

然后redefine他们在 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));

  }
}

Here 是 Plunker 中的一个示例。

【讨论】：