谈谈Angular模块的使用以及懒加载(2)-木庄网络博客

product模块
product的路由：module\product\product-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
 
import {ProductComponent} from './product.component';
const routes: Routes = [
  {
    path:'',
    component:ProductComponent
  }
];
 
@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class ProductRoutingModule { }

product的模块：
module\product\product.module.ts

import { ProductRoutingModule } from './product-routing.module';
 
imports: [
    ProductRoutingModule
  ],

user模块
user的路由： \module\user\user-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
 
import {UserComponent} from './user.component';
const routes: Routes = [
  {
    path:'',
    component:UserComponent
  }
];
 
@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class UserRoutingModule { }

user的模块： \module\user\user.module.ts

import {UserRoutingModule} from './user-routing.module';  +
 
 imports: [
    UserRoutingModule   +
  ],

RouterModule.forRoot() 和 RouterModule.forChild()

RouterModule对象为提供了两个静态的方法:forRoot()和forChild()来配置路由信息。

RouterModule.forRoot()方法用于在主模块中定义主要的路由信息，RouterModule.forChild()与 Router.forRoot()方法类似，但它只能应用在特性模块中。

即根模块中使用forRoot()，子模块中使用forChild()。

配置子路由

在商品模块的路由product-routing.module.ts 配置子路由

import { PlistComponent } from './components/plist/plist.component';
import { CartComponent } from './components/cart/cart.component';
import { PinfoComponent } from './components/pinfo/pinfo.component';
 
const routes: Routes = [
  {
    path:'',
    component:ProductComponent,
    children:[
      {path:'cart',component:CartComponent},
      {path:'pcontent',component:PinfoComponent}
    ]
  },
  {path:'plist',component:PlistComponent}
];