Dynamisch laden Komponenten in Angular2 RC.5

Question

Angesichts der neuen Änderungen, die mit der neuen RC kam ich bin ein bisschen verloren, wie ich dieses Problem angehen sollte.

Ich habe eine .json-Datei, die den Namen und den Pfad für die Komponenten enthält, die ich laden möchte. Ich kann die Struktur dieser Datei bei Bedarf ändern:

Beispiel:

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

Bis jetzt habe ich verwendet habe, die JSON, System importiert die js Dateien zu laden, sie in einem Array speichern und einfach die Reset Router-Konfiguration Hier ist eine wirklich alte und veraltete Version, aber das Prinzip ist das gleiche: http://embed.plnkr.co/jAmMZKz2VqponmFtPpes/

Ich bin auch daran interessiert, diese Komponenten lazy load zu haben. Keine Ahnung, wie das noch geht.

Jetzt sind die Ideen, die auf mir in den Sinn kam, wie ich dies tun könnte:

1. die json vor bootstraping bekommen und es an den Router passieren. Würde es vorziehen, dies nicht zu tun, da es nicht wirklich "der eckige Weg" ist.

2. Machen Sie eine LoadNextToContent jedes Mal, wenn der Benutzer eine dynamisch geladene Komponente benötigt und entfernen Sie es, wenn er fertig ist.

Gibt es leichtere Möglichkeiten, dies zu tun? Bessere Wege zur Leistung?

Answer 1

Wenn Sie über ng2 rc 5 sprechen, dann wurde NgModule eingeführt und das genau wie angularj 1 Modul-Konzept. Erinnern Sie sich Modul laden, nicht Komponenten einrichten rootModule wie:

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

Und innen Innen ./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 endlich da Sie wollen: {Pfad: 'Willkommen' , loadChildren: 'app/screens/welcome.module'}.

"ap/screens/welcom.module.ts" ist eine Datei auf Ihrer Festplatte.

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

hier Array für Bildschirmnamen können aus JSON-Aufruf gelesen werden. in http://plnkr.co/edit/nm5m7N?p=preview finden Sie alle Details oben und überprüfen Sie app/MyRouterLinks.ts, ruft es auf und ruft JSON-Datei zum Laden der Komponente. Oder siehe Quellcode: https://github.com/Longfld/DynamicalRouter