Angular中如何自定义模块

 为什么要自定义模块？

当项目比较小的时候就可以不用自定义模块，但是当我们的项目庞大，并且需要把所有组件挂载到根模块里面时，Angular内置的模块就不是很合适了，因此遇到这样的情况，我们就可以使用自定义模块的方式来规划我们的项目，并通过Angular自定义模块可以实现路由的懒加载。

 自定义模块有什么好处？

把功能相同的组件或类似的组件定义成一个模块，在根模块中动态加载子模块。例如，我们现在有100个组件，把这100个组件全部挂载在自定义模块中，当应用加载时，只加载根模块里的组件，需要的时候再去挂载那100个组件，这样应用在初始化的时候便会快一些。

自定义模块可以放置些什么？

如图所示，自定义模块就和根模块相同，可以放置组件、服务、指令。

如何创建自定义模块

·1、通过Angular指令在headerRout文件中创建一个名为modules的文件夹，并同时创建了一个名为user的模块；

PS E:\Angular\headRout> ng g module modules/user

2、将需要的子组件创建在user模块下,此时，组件默认引入在子组件的根模块下；

PS E:\Angular\headRout> ng g component modules/user/components/nav

3、创建根组件；

PS E:\Angular\headRout> ng g component modules/user   

4、创建服务；

PS E:\Angular\headRout> ng g service modules/user/services/head

5、在user模块的根模块中引入服务；

import { HeadService } from './services/head.service';

6、如何在项目根模块中使用user组件？

暴露组件：将其他外部模块需要使用的组件用exports暴露出来；

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

import { UserComponent } from './user.component';
import { NavComponent } from './components/nav/nav.component';
//引入服务
import { HeadService } from './services/head.service';

@NgModule({
  //声明组件：User模块组件
  declarations: [ UserComponent, NavComponent],
  //暴露组件：将其他外部模块需要使用的组件用exports暴露出来，
  exports:[UserComponent],

  //声明模块
  imports: [
    CommonModule
  ],
  //声明服务
  providers:[HeadService]
})
export class UserModule { }

7、在项目根模块中引入并声明自定义模块；

//引入自定义模块
import { UserModule } from './modules/user/user.module';

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    HomeComponent,
    MiaoshaComponent,
    CouponComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    UserModule   //声明自定义模块
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

8、将user模块挂载到项目根文件中，并通过指令ng serve --open  在浏览其中查看自定义模块中user组件的内容

<app-header></app-header>

<router-outlet></router-outlet>

<hr />

<br />

//模块子组件挂载
<app-user></app-user>

自定义模块目录：

效果展示：