以角度2

Question

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

你可以解释一下我如何用引导线https://angular.io/docs/ts/latest/guide/style-guide.html#!#sts=Lazy%20Loaded%20Folders中的一个例子来实现角度延迟加载

在我的项目中实施非常有用

带有+ 的前缀延迟加载文件夹也需要一个示例

显式我需要仅按需加载我的角度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 .. 这就是延迟加载的概念如何与角度2配合使用：）

您可以在https://www.xplatform.rocks/2016/02/09/angular2-quicky-async-routes/

进一步查看

我希望这就是你在寻找的东西：）

Answer 2

坏消息是rc1你赢了，并且只能按需加载我的角度2组件＆＃34;

好消息是使用ng2 rc5，你现在可以通过ng2团队介绍＆＃34;模块＆＃34;就像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：＆＃39; app / screens / welcome.module＆＃39;是ts文件app / screens / welcome.module.ts

有关详细示例，请检查以下内容： http://plnkr.co/edit/nm5m7N?p=preview