如何在angular2 rc5中动态地从json文件中创建路由和导入组件

Question

我试图从静态json文件动态创建路由，我正在从XHR请求中读取，我也试图导入同样写在相同json文件上的组件。我想弄清楚如何在我们的路由配置中使用json数据。

我面临的第一个明显的挑战是如何在初始化angular应用程序之前获得json数据并在我们的配置中实现。其次，即使我设法将json数据获取到我们的配置中，我如何在我们的module.js文件中声明它们，或者更确切地说添加到我们的声明中。

如果有人能帮忙我将很高兴。如果需要源代码，请让我知道。

Answer 1

随着ng2 RC5的引入，现在可以使用NgModule了

这里是@NgModule config:

import { routing }        from './app.routing';
@NgModule({
   imports:      [ BrowserModule,HttpModule,JsonpModule, routing ],
   declarations: [ AppComponent ],
   bootstrap:    [ AppComponent ]
})
export class AppModule { }

这里是组件加载，你可以看到组件的名称是从一个字符串数组，可以从你的数据库或磁盘读取Json文件。

const routes: Routes= GetScreens();
export const routing = RouterModule.forRoot(routes);
function GetScreens(){
  var results :Array<Object> = Array<Object>();
  let screens :Array<string> = ["page1","page2","page3"]
  results.push({ path: '' ,redirectTo: 'welcome', pathMatch: 'full'});
  results.push({ path: 'welcome', loadChildren: 'app/screens/welcome.module'       })
  screens.map(screenId => results.push({path: screenId, loadChildren:   'app/screens/' + screenId + '.module' }))
 return results 
}

在这里说:{path: 'welcome'， loadChildren: 'app/screens/welcome. '我们从文件app/screens/welcome. Module中加载组件welcome。{}.

请查看完整的故事/详细代码在这里:http://plnkr.co/edit/nm5m7N?p=preview