动态加载组件Angular2 RC.5

考虑到新的RC出现的新变化，我有点迷失在我应该如何处理这个问题。动态加载组件Angular2 RC.5

我有一个.json文件，其中包含我想要加载的组件的名称和路径。

例：

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

直到现在我用来加载JSON，系统导入js文件，将它们保存在一个数组，只是重置，如果需要，我可以改变这个文件的结构路由器配置。这是一个非常陈旧过时的版本，但原理是一样的：http://embed.plnkr.co/jAmMZKz2VqponmFtPpes/

我也对那些组件的延迟加载感兴趣。没有线索如何做到这一点呢。

既然来到我的脑海，我怎么能做到这一点的想法：

的Bootstrap之前获取JSON并把它传递到路由器。宁愿不这样做，因为它不是真正的“角度2”。
每次用户需要一个动态加载的组件并在完成使用时删除它，请执行LoadNextToContent。

有没有更简单的方法来做到这一点？更好的方式表现明智？

来源

2016-08-18 user1640736

你试过http://stackoverflow.com/a/38096260/217408 –

@GünterZöchbauer是的，我也问过这个问题。我使用它，它与RC.4完美配合。事情与Rc5你需要将它们添加到entryComponents，它变成一个痛苦。感觉像应该有一个更简单的方法，我完全错过了。 – user1640736

我明白了。还没有用RC.5调查过这个话题。 –

如果你正在谈论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 { }

而且里面里面./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 
}

ADN终于在这里你想要的：{路径： '欢迎' ，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

来源

2016-08-21 23:08:56

这个想法听起来不错。但是，出现两个问题：1.如果JSON很大，我可以使用承诺吗？和2.如果我想在运行时更改路由/组件，如何？ – user1640736

诺言？是的，你可以但可观察是更好的方式来使用，如果我有选择，我不会回诺言。我想我已经告诉你如何在运行时加载路由/组件。不应该“在运行期间改变....” –

动态加载组件Angular2 RC.5

回答

相关问题