Angular模块剖析

在 Angular 中，我们使用称为 NgModules 的模块来充当将应用程序或应用程序中的功能粘合在一起的单元。 所有 Angular 应用程序都有一个根模块，即应用程序模块，它负责将整个应用程序统一在一起。 将应用程序的各个功能分解到自己的模块中也是一种最佳实践。 这种做法可以实现诸如 延迟加载 或 预加载 某些功能。

这篇文章涵盖了 Angular 2+ 中的 NgModules

不要将 Angular 模块与 ES6 模块 混淆。 它们是两个不同的东西。

这是一个准系统 NgModule 的样子：

// ...ES6 module imports

@NgModule({
  declarations: [ ... ],
  imports: [ ... ],
  providers: [ ... ],
  bootstrap: [ ... ],
  entryComponents: [ ... ],
  exports: [ ... ]
})
export class MyModule { }

这是一个实际成员的示例：

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MaterialModule } from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { AppComponent } from './app.component';
import { VideoPlayerComponent } from './video-player/video-player.component';
import { ConfirmationDialogComponent } from './confirmation-dialog/confirmation-dialog.component';
import { VideoService } from './services/video.service';

打破它

让我们简单解释一下 @NgModule 装饰器中的每个条目：

声明

这是为了指定组件，pipes 和 directives 应该是模块的一部分。

进口

这是为了导入具有导出成员的其他模块，以在作为 NgModule 一部分的组件模板中使用。 例如，BrowserModule 重新导出 CommonModule，这使得内置的 NgIf 和 NgFor 指令可用。

RouterModule、BrowserModule、FormsModule、HttpModule 和 BrowserAnimationsModule 是常用导入模块的示例。

出口

如果要导出模块的成员，以便它们可以在其他模块的组件模板中使用，这些成员将进入 exports 数组。

例如，在 CommonModule 的情况下，COMMON_DIRECTIVES 和 COMMON_PIPES 被导出，这是在您导入 BrowserModule 时可用于组件模板的内容] 或 CommonModule 到你自己的 NgModules 中。

引导程序

这是定义根组件，通常称为AppComponent。 这意味着 bootstrap 应该只包含一个成员，并且它应该只在主应用程序模块中定义。

提供者

这就是注射剂的去处。 诸如服务、route guards 和 http 拦截器 之类的东西是应该是 providers 数组一部分的可注入的示例。 一旦提供，它们将在应用程序的任何地方可用。 这就是为什么通常在根应用程序模块中提供服务的原因。

入口组件

这适用于在编译期间 Angular 编译器无法找到的组件，因为它们在组件模板中的任何地方都没有被引用。 路由组件在模板中根本不被引用是很常见的，但 Angular 会自动将它们添加到 entryComponents 中，因此无需自己添加它们。

应该进入 entryComponents 的组件并不常见。 一个很好的例子是 Angular Material 对话框，因为它们是动态创建的，否则 Angular 编译器不会知道它们。