Angular 6 模块

概述

在 Angular 中，模块是一种用于组织和封装应用程序的基本构建块。模块将相关的组件、指令、管道和服务组合在一起，提供了一种在应用程序中进行逻辑分割和模块化的方式。Angular 模块使用 @NgModule 装饰器来定义。

创建模块

使用 Angular CLI 可以方便地创建新模块。运行以下命令创建一个名为 my-module 的新模块：

ng generate module my-module

这将自动创建一个名为 my-module 的文件夹，并在其中生成一个具有相应名称的模块文件。

模块的结构

一个典型的 Angular 6 模块文件如下：

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

import { MyComponent } from './my-component/my-component.component';

@NgModule({
  declarations: [
    MyComponent
  ],
  imports: [
    CommonModule,
    FormsModule
  ],
  exports: [
    MyComponent
  ]
})
export class MyModule { }

• declarations：在模块中声明的组件、指令和管道。对于模块的其他部分来说，这些都是可用的。
• imports：导入的其他模块。模块中使用的组件、指令和管道可以来自这些导入的模块。
• exports：可以从模块导出的组件、指令和管道。这些是其他模块可以使用的。

使用模块

要在应用程序中使用一个模块，需要在主模块（通常是 app.module.ts）中将其导入，然后将其添加到 imports 数组中。

import { MyModule } from './my-module/my-module.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MyModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

在使用模块导出的组件之前，确保将它们添加到需要使用的组件的 declarations 数组中。

总结

Angular 6 模块是组织和封装应用程序的基本构建块。使用模块可以使代码更具可维护性和可重用性。通过 @NgModule 装饰器，我们可以轻松定义模块的结构和依赖关系。在使用模块时，需要将其导入到主模块中，并在需要使用的组件的 declarations 数组中声明。