在Angular2 RC.5中動態加載組件

Question

考慮到新版RC帶來的新變化，我對如何解決此問題有些困惑。

我有一個.json文件，其中包含要動態加載的組件的名稱和路徑。 如果需要，我可以更改此文件的結構：

例：

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

直到現在，我一直都在加載JSON，系統導入js文件，將它們保存在數組中，然后簡單地重置路由器配置。 這是一個非常舊且過時的版本，但原理是相同的： http : //embed.plnkr.co/jAmMZKz2VqponmFtPpes/

我也有興趣讓那些組件延遲加載。 尚不知道如何執行此操作。

現在，我想到了如何執行此操作的想法：

1. 引導前獲取json並將其傳遞給路由器。 寧願不這樣做，因為它並不是真正的“ angular2方式”。

2. 每次用戶需要動態加載的組件時都要執行LoadNextToContent在使用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 { }

並在./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