動態加載組件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

回答

相關問題