角度2中的延遲加載文件夾

Question

我目前正在使用RC-1角版本

能否請您以示例為指導，以https://angular.io/docs/ts/latest/guide/style-guide.html#!#sts=Lazy%20Loaded的示例說明我如何在angular中實現延遲加載％20Folders

在我的項目中實施將非常有用

帶有+前綴的延遲加載文件夾也需要一個示例

明確的，我只需要按需加載我的angular 2組件

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

如果您正在尋找角度為2的延遲加載概念，則只需要對路徑進行一些更改即可。僅在需要時才使它們加載...

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

只是不要忘了導入asyncroute ..這就是延遲加載的概念如何與angular 2一起工作的:)

您還可以在https://www.xplatform.rocks/2016/02/09/angular2-quicky-async-routes/查看更多信息

我希望這就是你想要的:)

Answer 2

壞消息是，使用rc1，您將無法“僅按需加載我的angular 2組件”

好消息是ng2 rc5，您現在可以通過ng2團隊像angularJs 1一樣向后引入“模塊”來做到這一點。因此，首先將項目模塊化為：

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

然后按需加載：

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

此處：loadChildren：“ app / screens / welcome.module”是ts文件app / screens / welcome.module.ts

有關更多詳細示例，請檢查以下內容： http : //plnkr.co/edit/nm5m7N?p=preview