Angular6-创建惰性加载子模块(子module、子路由)

2019-06-09  本文已影响0人  月上秦少

创建component、module、service...

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

e.g. I will create a new page named "dc data" under the "dc-management" directory which is under the control of the specified module named the same.
     Then I will create a new component named "dc list" under this module.
Run like this:
    1.cd root directory
    2.ng g m pages/dc-management/dc-data --routing
    3.ng g c pages/dc-management/dc-data/dc-list

使用loadChildren惰性加载子模块

创建带routing的子module

ng g m customers --routing

创建由该子模块管理的页面组件

ng g c customers/customer-list

app-routing.module中使用loadChildren指定子module

const routes: Routes = [
  {
    path: '/',
    component: HomeComponent
  },
  {
    path: 'customers',
    loadChildren: './customers/customers.module#CustomersModule'
  },
  {
    path: 'orders',
    loadChildren: './orders/orders.module#OrdersModule'
  },
  {
    path: '',
    redirectTo: '',
    pathMatch: 'full'
  }
];

customer-routing.module中创建子路由

const routes: Routes = [
  {
    path: '',
    component: CustomerListComponent
  }
];
@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
上一篇 下一篇

猜你喜欢

热点阅读