angular 中的自定义模块

angular 中的自定义模块：

　　　　当项目比较庞大时，组件非常之多，这时候需要把相同功能的的组件分模块加载。分模块加载有两大好处：

　　　　1. 项目结构清晰

　　　　2. 提高加载速度

一. angular中自定义模块的目录结构划分：

 

二. 创建自定义模块

　　执行 ng g module modules/user， 生成 user.module.ts

　　

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

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

import { AddressComponent } from './components/address/address.component';

import { UserComponent } from './user.component';

import { OrderComponent } from './components/order/order.component';

import { CommonService } from './services/common.service'

@NgModule({

  declarations: [AddressComponent, UserComponent, OrderComponent],

  // 导出该模块的组件，不导出的话，无法在其他模块使用该模块的组件

  exports: [UserComponent, OrderComponent],

  imports: [

    CommonModule

  ],

  providers: [CommonService]

})

export class UserModule { }

三. 在其他模块中导入自定义模块，导入后，自定义模块中暴露（exports）的组件就可以直接使用了

// 引入自定义模块

import { UserModule } from './modules/user/user.module'

@NgModule({

  declarations: [

  ],

  imports: [

    UserModule // 导入自定义模块

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }

 

---

 

---

通过路由动态加载自定义模块：

　　一. 在自定义模块中创建自己的路由文件，通过命令或者手动创建

　　　　ng g module modules/user --routing 会生成一个 user.routing.ts 的文件。user.routing.ts文件中配置路由。配置方式

　　和根组件中配置一致。也可以配置子路由，配置方式一致。

　　　　

import { UserComponent } from './user.component'

import { AddressComponent } from './components/address/address.component'

import { OrderComponent } from './components/order/order.component'

const routes: Routes = [

  { path: '', component: UserComponent },

  { path: 'order', component: OrderComponent },

  { path: 'address', component: AddressComponent }

];

@NgModule({

  imports: [RouterModule.forChild(routes)],

  exports: [RouterModule]

})

export class UserRoutingModule { }

　　二. 在user模块中引入 user.routing 。user.module.ts 中导入路由

import { UserRoutingModule } from './user-routing.module'

import { UserComponent } from './user.component';

import { AddressComponent } from './components/address/address.component';

import { OrderComponent } from './components/order/order.component';

import { CommonService } from './services/common.service'

@NgModule({

  declarations: [UserComponent, AddressComponent, OrderComponent],

  // 导出该模块的组件，不导出的话，无法在其他模块使用该模块的组件

  // exports: [UserComponent, OrderComponent],

  imports: [

    CommonModule,

    UserRoutingModule

  ],

  providers: [CommonService]

})

export class UserModule { }

　　

　　

　　三. 在根组件中引入自定义模块 app.module.ts

// 引入自定义模块

import { UserModule } from './modules/user/user.module'

@NgModule({

  imports: [

    BrowserModule,

    AppRoutingModule,

    UserModule

  ],

  providers: [],

  bootstrap: [AppComponent]

})

　　四. 在根路由模块中配置  app-routing.ts, 使用 loadChildren : '模块路径#模块类名称'

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

import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [

  { path: 'user', loadChildren: "./modules/user/user.module#UserModule" },

  { path: 'news', loadChildren: "./modules/news/news.module#NewsModule" },

  { path: 'product', loadChildren: "./modules/product/product.module#ProductModule" },

  { path: '**', redirectTo: 'user' } 

];

@NgModule({

  imports: [RouterModule.forRoot(routes)],

  exports: [RouterModule]

})

export class AppRoutingModule { }