Lazy Loading-Ordner in Winkel 2

Question

Ich bin derzeit mit abgewinkelte Ausführung RC-1

können Sie mir bitte erklären, wie ein träges Laden in Winkel mit einem Beispiel mit in der Führungslinien zu implementieren https://angular.io/docs/ts/latest/guide/style-guide.html#!#sts=Lazy%20Loaded%20Folders

es wäre sehr nützlich, in meinem Projekt

Präfix faulen Loaded Ordner zu implementieren mit + hierfür ein Beispiel benötigen auch

explizite I muss meine Winkel 2 Komponenten nur bei Bedarf

app.component.ts

import {Component, ElementRef, AfterViewInit, AfterViewChecked, OnInit, OnDestroy, DoCheck, Input, Output, SimpleChange, 
    EventEmitter, ContentChild, ContentChildren, Renderer, IterableDiffers, Query, QueryList, TemplateRef, 
    RouteConfig, Router, ROUTER_DIRECTIVES, 
    Http, HTTP_PROVIDERS, Headers, 
    APIServiceHelper 
    , APIServiceConstants 
    , Header 
    , Footer 
    , LeftNavigation 
    , sample 
    , AsyncRoute 
} from "./index"; 
declare var $; 
declare function initiateSessionTimeOut(minutes); 
declare var System: any; 
@Component({ 
    selector: 'my-app', 
    templateUrl: 'app/app.component.html', 
    directives: [ROUTER_DIRECTIVES, Header, Footer, LeftNavigation], 
    providers: [HTTP_PROVIDERS, APIServiceHelper, APIServiceConstants], 
    host: { 
     '(document:click)': 'onClick($event)', 
    } 
}) 
@RouteConfig([ 
    { path: '/sample', name: 'sample', component: sample, useAsDefault: true }, 
    new AsyncRoute({ 
     path: '/sample', 
     loader:() => System.import('./app/sample/sample.component').then(m => m.sample), 
     name: 'sample' 
    }), 
    new AsyncRoute({ 
     path: '/sample1', 
     loader:() => System.import('./app/sample1/sample1.component').then(m => m.sample1), 
     name: 'sample1' 
    }), 
    new AsyncRoute({ 
     path: '/sample2', 
     loader:() => System.import('./app/sample2/sample2.component').then(m => m.sample2), 
     name: 'sample2' 
    }), 


]) 
export class AppComponent implements OnInit { 


} 

Answer 1

laden Wenn Sie für verzögertes Laden-Konzept mit dem Winkel 2 suchen, dann müssen Sie nur noch einige Änderungen in Ihrem Routen ... Sie müssen sie nur machen geladen werden, wenn sie benötigt werden ...

new AsyncRoute({ 
path: '/login', 
loader:() => System.import('./dist/login.component').then(m => m.loginComponent), 
name: 'Login' }) 

vergessen Sie nicht nur zu importieren asyncroute .. das ist, wie Konzept der träges Laden arbeitet mit Winkel 2 :)

weiter können Sie diese Besuche bei https://www.xplatform.rocks/2016/02/09/angular2-quicky-async-routes/

Ich hoffe, das ist das, was u für :) suchen

Answer 2

Die schlechte Nachricht ist mit rc1 du bist nicht in der Lage, "meine Winkel 2 Komponenten nur auf Anfrage laden"

Die gute Nachricht ist mit ng2 rc5, können Sie dies jetzt durch ng2 Team Einführung zurück "Modul" genau wie angularJs 1. Also, zuerst Modul Ihr Projekt als:

@NgModule({ 
    imports:  [ BrowserModule, routing ], 
    declarations: [ AppComponent ], 
    bootstrap: [ AppComponent ] 
}) 
export class AppModule { } 

Dann auf Anfrage laden:

import { Routes, RouterModule } from '@angular/router'; 
const routes: Routes= [{path: 'welcome', loadChildren: 'app/screens/welcome.module'}]; 
export const routing = RouterModule.forRoot(routes); 

hier: loadChildren: 'app/screens/welcome.module' TS-Datei app/screens/welcome.module.ts

Für weitere Einzelheiten Beispiel, überprüfte das: http://plnkr.co/edit/nm5m7N?p=preview