美文网首页
Angular6-创建惰性加载子模块(子module、子路由)

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

作者: 月上秦少 | 来源:发表于2019-06-09 14:22 被阅读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]
    })
    

    相关文章

      网友评论

          本文标题:Angular6-创建惰性加载子模块(子module、子路由)

          本文链接:https://www.haomeiwen.com/subject/kqegxctx.html