美文网首页
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、子路由)

    创建component、module、service... Run ng generate component c...

  • Vue路由嵌套与路由模块化

    路由嵌套 1、引入创建好的子组件 2、配置路由。注意,children中配置的子模块路由,path值前不带斜杠 /...

  • Angular4路由懒加载loadChildren

    要想建立一个惰性加载的特性模块,有三个主要步骤: 1.创建该特性模块。2.创建该特性模块的路由模块。3.配置相关路...

  • element商品分类

    B.创建子级路由 创建categories子级路由组件并设置路由规则 C.添加组件基本布局 在Cate.vue组件...

  • Vuex4.x(五)模块管理(上)

    module 的用法 一开始以为模块只能是一层,仔细看了官网才发现,原来模块还可以有n层,即子模块、子子模块、子子...

  • Android Module之间数据传递

    方法一:使用接口回调 (1)在子module创建回调接口(参数可变) (2)在子module 实现类设置接口回调 ...

  • 自定义View

    programing 方式 创建一个view的子类 在initWithFrame方法中添加子控件/懒加载子控件 在...

  • node一些模块

    child_process模块 通过child_process模块创建子进程 childProcess.exec(...

  • 4.子路由

    创建xxx和yyy子组件 传值 路由配置 根据题意,加到商品模板

  • Angular——模块懒加载

    惰性加载可以通过把应用拆分成多个发布包,并按需加载它们,来加速应用的启动时间。 主模块 home.module.t...

网友评论

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

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