Question

考虑到新RC出现的新变化，我对如何解决这个问题感到有点迷失。

我有一个.json文件，其中包含我想要动态加载的组件的名称和路径。如果需要，我可以更改此文件的结构：

示例：

[
  {"component": "Comp1", "path": "./comp1.js"},
  {"component": "Comp2", "path": "./comp2.js"}
]

到目前为止，我已经习惯了加载JSON，系统导入js文件，将它们保存在一个数组中，然后只需重置路由器配置。这是一个非常陈旧和过时的版本，但原理是相同的：http://embed.plnkr.co/jAmMZKz2VqponmFtPpes/

我也对那些组件延迟加载感兴趣。不知道如何做到这一点。

现在我想到了如何做到这一点的想法：

在bootstraping之前获取json并将其传递给路由器。不愿意这样做，因为它不是真正的“angular2方式”。
每次用户需要动态加载的组件时执行LoadNextToContent，并在完成使用后删除它。

有更简单的方法吗？表现更好的方式更好吗？

Answer 1

如果你在谈论ng2 rc 5，那么就引入了NgModule，就像angularj 1模块概念一样。记住你正在加载模块，而不是组件将rootModule设置为：

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

在Inside ./app.routing.ts里面

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.module'}。

“ap / screens / welcom.module.ts”是您磁盘上的文件。

let screens :Array<string> = ["page1","page2","page3"]

这里可以从json调用中读取屏幕名称数组。在http://plnkr.co/edit/nm5m7N?p=preview中你可以找到上面的完整细节并检查app / MyRouterLinks.ts，它调用并获取json文件来加载组件。或者查看源代码：https://github.com/Longfld/DynamicalRouter

动态加载Angular2 RC.5中的组件

1 个答案: