1

我的顶部菜单模块对路由和模块一无所知，它们将在从 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 发出请求。如何正确执行？

4

1 回答 1

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 中的一个示例。

于 2017-04-30T06:17:10.327 回答