什么是 NgModule？

Question

什么是 NgModule？

IT Interview Practice · Accepted Answer

**NgModule** 是一个用 `@NgModule` 装饰的类，它将相关的 components、directives、pipes 和 services 分组到一个内聚的块中，告诉 Angular 如何编译和联接它们。（注意：现代 Angular 越来越倾向于使用 **standalone components** 而不是 NgModules，但理解 NgModules 对于大多数现有代码库仍然至关重要。）

## NgModule 的结构

```ts
import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";

@NgModule({
  declarations: [UserListComponent, UserCardComponent], // components/directives/pipes THIS module owns
  imports: [CommonModule, FormsModule],                 // other modules whose exports we need
  exports: [UserListComponent],                          // what we make available to importers
  providers: [UserService],                              // services (DI) provided by this module
})
export class UsersModule {}
```

## 四个关键数组

```text
declarations → components, directives, and pipes that BELONG to this module
imports      → other NgModules whose exported features this module needs
exports      → the subset of declarations/modules made available to importers
providers    → services registered for dependency injection
```

component 只能在 **一个** module 中声明，并且必须被声明（或作为 standalone 导入）才能在该 module 的模板中使用。

## 根模块

```ts
@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule],
  bootstrap: [AppComponent], // the root component to launch
})
export class AppModule {}
```

每个（非 standalone）应用都有一个根 `AppModule`，其中有一个 `bootstrap` 数组，用于命名启动 component。

## Feature modules 和组织

```text
AppModule (root) → imports → UsersModule, AdminModule, SharedModule
```

应用被组织成 **feature modules**（每个域区域一个）和一个 **shared module**（公共 components/pipes），保持代码库的模块化，并启用按 feature 进行的懒加载。

## 向 standalone 的转变

```ts
@Component({ standalone: true, imports: [CommonModule], ... }) // no NgModule needed
```

现代 Angular 允许 components 成为 **standalone** —— 直接声明它们自己的依赖项 —— 减少或消除 NgModule 样板代码。

## 为什么这很重要

NgModules 是 Angular 传统的组织和依赖注入机制——理解 `declarations`/`imports`/`exports`/`providers` 对于在绝大多数现有 Angular 应用中导航以及理解懒加载是必要的。

虽然新代码趋向于 standalone components，但对于真实的 Angular 工作，NgModule 知识仍然是必不可少的。

NgModule 的结构

四个关键数组

根模块

Feature modules 和组织

向 standalone 的转变

为什么这很重要

相关问题