angular 中的延迟加载文件夹 2

Question

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

你能解释一下如何在 angular 中使用指南 https://angular.io/docs/ts/latest/guide/style-guide.html#!#sts=Lazy%20Loaded%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

如果您正在寻找 angular 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 "load my angular 2 components only on demand"

好消息是 ng2 rc5，你现在可以通过 ng2 团队介绍回来 "module" 就像 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

angular 中的延迟加载文件夹 2

Lazy Loading Folder in angular 2

lazy-loading

angular2-directives

angular2-routing

angular