Angular学习：模块和组件的动态加载

可以利用路由的loadChildren来动态加载angular模块和组件。

1. 建立一个要动态加载的模块（包含相应的组件）

dyn-plugin.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { DynPluginRoutingModule } from './pfc-plugin-routing.module';
import { DynPluginComponent } from './pfc-plugin.component';

@NgModule({
  imports: [
    CommonModule,
    DynPluginRoutingModule
  ],
  declarations: [DynPluginComponent],
  exports: [DynPluginComponent]
})
export default class DynPluginModule { }

注意：要有default 。

组件的代码就省略了。

2. 通过路由的loadChildren来动态加载模块。

guimain-routing.module.ts

let baseRoute: Route = {
        path: '',
        component: GuimainComponent,
        children: [
            {
                path: '',
                redirectTo: 'dashboard',
                pathMatch: 'full'

            },
            {
                path: 'config',
                component: MainconfigComponent
            },
            {
                path: 'dashboard',
                component: DashboardComponent
            }
        ]
    }

 let appendRoute: Route = {
         path: '',
         component: GuimainComponent,
         children: [
             {
                path: 'plugin',
                loadChildren: 'app/plugin/dyn-plugin/dyn-plugin.module'
             }
         ]
}

let rtnRoutes: Routes = [baseRoute, appendRoute];

@NgModule({
    imports: [
        RouterModule.forChild(rtnRoutes)
    ],
    exports: [RouterModule]
})
export class GuimainRoutingModule { }