angular2动态路由运行时组件导入

时间:2016-08-09 15:44:27

标签: angular angular2-routing

Angular 2 rc.4

我在routes变量中定义了动态路由JSON。问题我只有组件。我仍然需要使用import语句导入所有组件并将它们放在文件的顶部以便使用它们,这实际上杀死了动态路由的目的。

我见过一些例子,比如人们试图使用AsyncRoute的System.import(' component_file_name')已被弃用。它有点显示停止任何解决方案建议提前赞赏

import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES, Router, RouterConfig } from '@angular/router';
import {IncComponent} from './inc.component';
import {AdditionComponent} from './addition.component';
import {RomanComponent} from './roman.component';
declare var System:any;

import {AjaxRequestService} from './ajax.req.service';

@Component({
    selector: 'app',
    templateUrl:'app/app.html',
    providers: [
        AjaxRequestService,
    ],
    directives: [ROUTER_DIRECTIVES]
})

export class AppComponent {

    constructor(private router: Router){

    let routes: RouterConfig = [
            {
                path: 'increment',
                component: IncComponent
            },{
                path: 'adder',
                component: AdditionComponent
            },{
                path: 'roman',
                component: RomanComponent
            }

        ];

        router.resetConfig(routes);
    }

    title = 'Angular 2 Demo Applications';
}

2 个答案:

答案 0 :(得分:0)

您可以使用loadChildren之类的

{ path: 'heroes', loadChildren: 'app/hero/hero.module' }

另见angular2 rc.4 layz routing

答案 1 :(得分:0)

我有rc5版本与您分享: http://plnkr.co/edit/18CZVF?p=preview

使用AppModule后,loadChildren仍然与:

相同
{ path: 'heroes', loadChildren: 'app/hero/hero.module' }