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 { }