Angular 4 模块

在 Angular 中，模块用于组织应用程序。每个 Angular 应用程序都至少有一个根模块，通常称为 AppModule。通过构建模块，可以有效地管理应用程序中的视图和逻辑。

NgModule 装饰器

在 Angular 中，使用 NgModule 装饰器来定义模块。这个装饰器通常用于修饰一个类，这个类描述了模块的元数据。下面是一个使用 @NgModule 装饰器的例子：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

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

在这个例子中，@NgModule 装饰器被用于修饰一个叫做 AppModule 的类。这个类通过 imports 属性来导入其他模块，通过 declarations 属性来声明组件，通过 bootstrap 属性来指定哪个组件是这个模块的启动组件。

模块的元数据

模块的元数据描述了模块并告诉 Angular 如何处理模块的组件。下面是 NgModule 装饰器可以接受的一些属性：

• imports：导入其他模块。
• declarations：声明该模块中的组件、指令和管道等。
• providers：提供依赖项，这些依赖项可以在整个模块中的任何地方使用。
• entryComponents：声明这个模块中的动态生成的组件。
• bootstrap：定义这个模块的启动组件。

模块的导入和导出

在 Angular 中，模块可以相互引用。在 @NgModule 装饰器中，imports 和 exports 属性被用于导入和导出模块。通过 imports 属性来导入其他模块，通过 exports 属性来导出模块中的组件、指令和管道等，以便其他模块可以使用它们。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { SharedModule } from './shared/shared.module';

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

在这个例子中，SharedModule 被导入到了 AppModule 中，并且 AppComponent 被导出到了 SharedModule 中，以供其他模块使用。

总结

Angular 的模块是组织应用程序的重要工具。通过 NgModule 装饰器，可以定义模块的元数据，并管理模块中的组件、指令和管道等。通过 imports 和 exports 属性，可以将模块相互引用并共享组件、指令和管道等。