# 用 `@NgModule` 注册多重提供者：逐行深拆 `providers`、`useClass` 与 `multi: true` 的工作原理

你给出的代码：

```ts
@NgModule({
  imports: [CommonModule],
  providers: [
    {
      provide: AB_PAGE_NORMALIZER,
      useClass: MyPageNormalizer,
      multi: true,
    },
  ],
})
export class MyNormalizerModule {}
```

下面按行、按字段拆开讲透，同时补上可运行的最小示例与基于 RxJS 的实战用法。为避免机械感，我会把概念串到同一条叙事主线里：`通过一个 InjectionToken 聚合多种策略类，形成一个可扩展且可测试的页面规范化流水线`。

---

## `@NgModule({ ... })` 的语义

`@NgModule` 是一个装饰器，它把一个普通的 TypeScript 类标记为 Angular 的模块，并通过元数据告诉编译器如何编译模板与配置依赖注入。换言之，这一层元数据既影响模板编译，也影响注入器的提供者表（provider registry）。官方对 `NgModule` 的定义与作用在新版文档里有明确描述，其中强调了该装饰器接受的元数据用于配置依赖注入与模板编译。([Angular][1])

---

## `imports: [CommonModule]` 的含义

`imports` 字段声明该模块依赖了哪些别的模块。`CommonModule` 是一个频用模块，导出了模板里常见的结构型指令与管道，比如 `NgIf`、`NgForOf`、`AsyncPipe`、`DecimalPipe` 等；在特性模块里通常引入它，而根模块一般引入 `BrowserModule`（后者会重新导出 `CommonModule`）。这部分在 API 与常用模块的官方文档均有说明。([Angular][2])

将 `CommonModule` 放进 `imports` 并不会直接影响依赖注入本身，但它让该模块内的组件模板可以使用这些基础指令与管道。如果你的模块只提供服务、不声明组件，也可以不引它；这里保留 `CommonModule` 往往出于模板复用或形成规范化的模块骨架。

---

## `providers: [ { ... } ]` 的入口

`providers` 是依赖注入系统的核心配置点之一。每个 `provider record` 都是一条 `如何拿到一个依赖值` 的指令，包括用什么 `token` 标识、用哪种提供策略（`useClass`、`useValue`、`useExisting`、`useFactory`）、是否做多重聚合 `multi: true` 等。`provider` 的定义与多种 `use*` 策略可以参考官方的 `dependency-injection-providers` 指南与 `providers` 指南。([Angular][3])

---

## `provide: AB_PAGE_NORMALIZER` —— 自定义 Token

* `provide` 指定本条提供者记录对应的 `token`。注入器用这个 `token` 去匹配要注入的值。
* 当一个依赖不方便被类名唯一标识，或者你希望同一个接口有多个实现时，通常用 `InjectionToken<T>` 作为 `token`，类型安全且可读性好。

官方文档明确指出：对非类依赖，使用 `InjectionToken` 作为提供者令牌；示例里常见 `APP_CONFIG` 一类的写法。([Angular][3])

在你的代码中，`AB_PAGE_NORMALIZER` 就是这样一个 `InjectionToken`，它约定了被注入的是一批 `页面归一化策略`。

---

## `useClass: MyPageNormalizer` —— 指定实例化哪个类

* `useClass` 告诉注入器：当有人请求 `AB_PAGE_NORMALIZER` 对应的值时，请通过 `new MyPageNormalizer(...)` 来构造一个实例（构造函数里依赖的其他服务也会被注入）。
* 这种策略属于 `ClassProvider`，是最常见的服务注册方式之一。官方 API 对 `ClassProvider` 的说明也强调了它适合在多文件中为同一 `token` 聚合配置。([v17.angular.io][4])

---

## `multi: true` —— 多重提供者，合并为数组

* `multi: true` 的关键效果是：相同的 `token` 可以被注册多次，每一次都追加一个提供者；最终注入时，不返回单个值，而是返回一个**数组**，数组里按 `provider` 注册顺序放入每次提供的值或工厂产物。
* 这一特性是 Angular 依赖注入系统的扩展点，Angular 自身也大量使用，例如对拦截器、路由守卫、`HTTP_INTERCEPTORS` 等的聚合。权威资料与经典文章对 `multi providers` 的行为与用法有详解。([blog.thoughtram.io][5])

在你的示例里，给同一个 `AB_PAGE_NORMALIZER` 放入 `multi: true`，意味着你可以在其他模块里继续追加更多 `useClass`，构成一组`归一化策略类`。在消费者端注入时拿到的是 `MyPageNormalizer` 加上其他同类的**数组**。

---

## `export class MyNormalizerModule {}` —— 声明模块类

被 `@NgModule` 修饰的类本身没有业务逻辑要求，但它作为模块的标识被编译器与运行时使用。把 `providers` 挂在这个模块上，意味着**该模块注入器**会持有这些提供者记录；把它导入到应用的根模块或某个特性模块后，它们的注入器层级会得到这条配置。模块、组件与指令层面 `providers` 的生效范围不同，这属于 Angular 的层级注入器（hierarchical injector）模型，可参考这类对比文章。([CodeCraft][6])

---

## 可运行的最小示例：用 InjectionToken 聚合多种 `PageNormalizer` 策略

下面给出一个最小化但可运行的示例（Angular 16+ 或 17，`NgModule` 仍完全可用；代码全部使用单引号以避免成对英文双引号）。该示例包含：

* 一个 `AB_PAGE_NORMALIZER` `InjectionToken<PageNormalizer>`；
* 两个策略类 `MyPageNormalizer` 与 `TrimTitleNormalizer`，实现统一接口；
* 一个 `MyNormalizerModule`，以 `multi: true` 方式把两种策略都挂到同一个 `token`；
* 一个 `PageNormalizationService` 消费端，通过注入 `PageNormalizer[]`，用 RxJS 把所有策略串成流水线；
* 一个演示组件 `DemoComponent`，在视图上展示归一化前后的数据；
* 一个 `AppModule` 把一切串起来。

> 目录结构示意
> `app/normalizers/token.ts`、`app/normalizers/my-page-normalizer.ts`、`app/normalizers/trim-title-normalizer.ts`、`app/normalizers/normalizer.module.ts`、`app/services/page-normalization.service.ts`、`app/demo.component.ts`、`app/app.module.ts`

### 1) 定义领域模型与 Token

```ts
// app/normalizers/token.ts
import { InjectionToken } from '@angular/core';
import { Observable } from 'rxjs';

export interface Page {
  id: string;
  title: string;
  content: string;
  meta?: Record<string, unknown>;
}

export interface PageNormalizer {
  // 输入一个 Page，输出一个归一化后的 Page（同步或异步都可）
  normalize(input: Page): Observable<Page>;
}

// 多重提供者的 Token：最终会被注入为 PageNormalizer[] 数组
export const AB_PAGE_NORMALIZER = new InjectionToken<PageNormalizer[]>('AB_PAGE_NORMALIZER');
```

> 这里把 `InjectionToken` 的范型写成 `PageNormalizer[]` 更贴近注入端的真实类型；也可以写成 `PageNormalizer`，但在注入端使用 `@Inject` 注解时记得标注成数组类型。相关类型与注入写法在资料与社区问答中都有示例。([Stack Overflow][7])

### 2) 策略类一：去除危险词、补全元数据

```ts
// app/normalizers/my-page-normalizer.ts
import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';
import { map } from 'rxjs/operators';
import { Page, PageNormalizer } from './token';

@Injectable()
export class MyPageNormalizer implements PageNormalizer {
  private blockedWords = ['hack', 'drop table', 'script'];

  normalize(input: Page): Observable<Page> {
    return of(input).pipe(
      map(page => {
        const sanitizedTitle = this.blockedWords.reduce((t, w) => t.replace(new RegExp(w, 'ig'), ''), page.title);
        const meta = { ...page.meta, normalizedBy: [...(page.meta?.['normalizedBy'] as string[] ?? []), 'MyPageNormalizer'] };
        return { ...page, title: sanitizedTitle.trim(), meta };
      })
    );
  }
}
```

### 3) 策略类二：裁剪标题与内容空白

```ts
// app/normalizers/trim-title-normalizer.ts
import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';
import { map } from 'rxjs/operators';
import { Page, PageNormalizer } from './token';

@Injectable()
export class TrimTitleNormalizer implements PageNormalizer {
  normalize(input: Page): Observable<Page> {
    return of(input).pipe(
      map(p => ({
        ...p,
        title: p.title.trim().replace(/\s+/g, ' '),
        content: p.content.trim(),
        meta: { ...(p.meta ?? {}), normalizedBy: [...(p.meta?.['normalizedBy'] as string[] ?? []), 'TrimTitleNormalizer'] }
      }))
    );
  }
}
```

### 4) 把两种策略以 `multi: true` 聚合到同一 Token

```ts
// app/normalizers/normalizer.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AB_PAGE_NORMALIZER } from './token';
import { MyPageNormalizer } from './my-page-normalizer';
import { TrimTitleNormalizer } from './trim-title-normalizer';

@NgModule({
  imports: [CommonModule],
  providers: [
    { provide: AB_PAGE_NORMALIZER, useClass: MyPageNormalizer, multi: true },
    { provide: AB_PAGE_NORMALIZER, useClass: TrimTitleNormalizer, multi: true },
  ],
})
export class MyNormalizerModule {}
```

> 这段正是你示例的延伸：同一 `token` 注册两次，注入端获得 `PageNormalizer[]`。关于 `useClass` 与多提供者的官方说明与经典文章，见引用。([Angular][3])

### 5) 消费端：把 `PageNormalizer[]` 串成 RxJS 流水线

```ts
// app/services/page-normalization.service.ts
import { Inject, Injectable } from '@angular/core';
import { Observable, from } from 'rxjs';
import { concatMap } from 'rxjs/operators';
import { AB_PAGE_NORMALIZER, Page, PageNormalizer } from '../normalizers/token';

@Injectable({ providedIn: 'root' })
export class PageNormalizationService {
  constructor(
    @Inject(AB_PAGE_NORMALIZER) private readonly normalizers: PageNormalizer[]
  ) {}

  // 依次执行每个策略，形成串行流水线
  normalize(page: Page): Observable<Page> {
    return from(this.normalizers).pipe(
      concatMap(n => n.normalize(page)),   // 逐个策略运行
      // 关键点：上一个策略的结果要作为下一个策略的输入
      // 用 concatMap 的闭包变量保存滚动中的 page
      // 更简洁的做法：reduce 成单个 Observable
    );
  }

  // 更严谨版本：把数组 reduce 成串行链
  normalizeSequential(page: Page): Observable<Page> {
    return this.normalizers.reduce((acc$, n) => acc$.pipe(concatMap(p => n.normalize(p))), from([page]));
  }
}
```

> 这里注入端拿到的是 `PageNormalizer[]`，与 `multi: true` 的行为一致。若使用函数式注入，也可以写成 `inject(AB_PAGE_NORMALIZER)`，社区问答对 `inject` + `multi` 的写法也有示例。([Stack Overflow][8])

### 6) 演示组件：展示归一化效果

```ts
// app/demo.component.ts
import { Component } from '@angular/core';
import { PageNormalizationService } from './services/page-normalization.service';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { Page } from './normalizers/token';

@Component({
  selector: 'app-demo',
  template: `
    <h3>Before</h3>
    <pre>{{ raw | json }}</pre>

    <h3>After</h3>
    <pre>{{ normalized$ | async | json }}</pre>
  `,
})
export class DemoComponent {
  raw: Page = {
    id: 'p1',
    title: '  Hello   World <script>  ',
    content: '   Content with   spaces   ',
  };

  normalized$: Observable<Page>;

  constructor(private svc: PageNormalizationService) {
    this.normalized$ = this.svc.normalizeSequential(this.raw).pipe(
      // normalizeSequential 最终流里会发出最后一次的 Page
      map(p => p)
    );
  }
}
```

### 7) 根模块把一切串起来

```ts
// app/app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { DemoComponent } from './demo.component';
import { MyNormalizerModule } from './normalizers/normalizer.module';

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

到这里，你可以 `ng serve` 运行，页面会显示归一化前后的 `Page` 对象。根模块引入了 `BrowserModule`，它会重新导出 `CommonModule` 并提供在浏览器里渲染应用的能力，这在常用模块文档与社区问答都有阐述。([v17.angular.io][9])

---

## 进一步的设计要点与常见误区

### 1) `multi: true` 的数组顺序

同一 `token` 的多条提供者记录按**注册顺序**聚合成数组。设计流水线时要显式约定顺序，例如把 `去危险词` 放在 `裁剪空白` 之前，避免正则替换残留多余空格。`multi` 行为与应用场景可参考早期的权威文章与现代教程。([blog.thoughtram.io][5])

### 2) `providers` 放在 `NgModule`、`Component` 还是 `Directive`

* 放在 `NgModule`：模块注入器级别，影响使用该模块的所有组件，适用于`全局策略`、`跨组件的拦截器/规范化器`。
* 放在 `Component.providers`：该组件注入器及其子注入器可见，适合**局部覆盖**某个 token。
* 放在 `Component.viewProviders`：仅对视图内的可见性生效，不向内容投影传递。
  参考这类系统化的对比资料以选择正确层级。([CodeCraft][6])

### 3) `useClass` 以外的几种写法

* `useValue`：直接提供一个常量值或对象，适合配置项。
* `useExisting`：把一个 token 指向另一个 token，形成别名。
* `useFactory`：通过工厂函数创建值，便于按环境变量分支。
  这些策略的官方说明与实践文章均有例子可参考。([Angular][3])

### 4) `InjectionToken` 的类型与 DX

把 `InjectionToken` 的范型设成数组（例如 `PageNormalizer[]`）能在注入端获得更好的类型提示；若你的团队偏好函数式注入 `inject()`，也可以配合类型工具改进 DX，社区有不少最佳实践讨论。([nartc.me][10])

---

## 用例扩展：第三方模块无侵入追加策略

`multi: true` 的一个工程价值在于：任何特性模块都可以无侵入地扩展该流水线。例如你在电商站点的 `ProductFeatureModule` 里新增一个把 `title` 统一前缀为站点名的策略：

```ts
// feature/product/product-feature.module.ts
import { NgModule } from '@angular/core';
import { AB_PAGE_NORMALIZER } from '../../normalizers/token';
import { Injectable } from '@angular/core';
import { of } from 'rxjs';

@Injectable()
export class BrandPrefixNormalizer {
  normalize(p: any) { return of({ ...p, title: `MyShop - ${p.title}` }); }
}

@NgModule({
  providers: [
    { provide: AB_PAGE_NORMALIZER, useClass: BrandPrefixNormalizer, multi: true },
  ],
})
export class ProductFeatureModule {}
```

这个模块只要被导入到应用对应的路由分支，就能自然地把新策略接到现有流水线末端，充分体现开放-封闭原则。对于如何通过 `multi providers` 扩展平台而不侵入内部代码，经验文章里有相近观点。([Medium][11])

---

## 关联资料小抄

* `NgModule` 元数据与依赖注入配置的官方概念与说明。([Angular][1])
* `CommonModule` 的职责与 `BrowserModule` 的关系。([Angular][2])
* 依赖注入的提供者配置总览，`useClass` 等策略。([Angular][3])
* `ClassProvider` 与多文件聚合配置的用法。([v17.angular.io][4])
* `multi providers` 的行为、数组注入与实践示例。([blog.thoughtram.io][5])

---

## 把你的原始代码逐行复盘

把你的模块再贴一次，对应解释对应到每一行：

```ts
@NgModule({                       // 把下方类标记为 Angular 模块，启用元数据配置注入与模板编译。:contentReference[oaicite:21]{index=21}
  imports: [CommonModule],        // 引入基础指令/管道等能力，常见于特性模块；与注入本身无直接关系。:contentReference[oaicite:22]{index=22}
  providers: [                    // 模块级提供者表，把以下条目注册进模块注入器。:contentReference[oaicite:23]{index=23}
    {
      provide: AB_PAGE_NORMALIZER,// 指定 token：一个 InjectionToken，用它来索引/注入值。:contentReference[oaicite:24]{index=24}
      useClass: MyPageNormalizer, // 指定通过实例化该类来提供值（ClassProvider）。:contentReference[oaicite:25]{index=25}
      multi: true,                // 声明为多重提供者，同 token 多次注册，注入端得到数组。:contentReference[oaicite:26]{index=26}
    },
  ],
})
export class MyNormalizerModule {}// 模块类本体，承载上面的元数据；导入该模块即可获取这些 providers。
```

---

## 小结

* `provide` 绑定 `InjectionToken`，把抽象能力命名化与类型化；
* `useClass` 指向具体实现类，让注入器知道如何构造实例；
* `multi: true` 把同一抽象能力的多种实现聚合为数组，天然适合策略模式、拦截器链、数据规范化流水线；
* 放在 `NgModule.providers` 里，能在需要的注入器层级扩散这些实现；
* 消费端注入的是一个 `PageNormalizer[]`，用 RxJS 串起来，就形成了可组合、可测试、可横向扩展的处理链。

这些结论都可以在官方手册与业界文章里找到依据，并且能直接映射到你的生产场景。([Angular][3])

---

**题目**：`用 NgModule 的 multi providers 构建可扩展的页面规范化流水线`

[1]: https://angular.dev/guide/ngmodules/overview?utm_source=chatgpt.com "NgModules"
[2]: https://angular.dev/api/common/CommonModule?utm_source=chatgpt.com "CommonModule"
[3]: https://angular.dev/guide/di/dependency-injection-providers?utm_source=chatgpt.com "Configuring dependency providers"
[4]: https://v17.angular.io/api/core/ClassProvider?utm_source=chatgpt.com "ClassProvider"
[5]: https://blog.thoughtram.io/angular2/2015/11/23/multi-providers-in-angular-2.html?utm_source=chatgpt.com "Multi Providers in Angular | Articles by thoughtram"
[6]: https://codecraft.tv/courses/angular/dependency-injection-and-providers/ngmodule-providers-vs-component-providers-vs-component-viewproviders/?utm_source=chatgpt.com "NgModule.providers vs Component.providers vs ... - CodeCraft"
[7]: https://stackoverflow.com/questions/51824125/injection-of-multiple-instances-in-angular?utm_source=chatgpt.com "Injection of multiple instances in Angular - typescript"
[8]: https://stackoverflow.com/questions/74598049/how-to-correctly-use-the-angular-14-inject-function-with-multi-true?utm_source=chatgpt.com "How to correctly use the Angular 14 inject function with multi"
[9]: https://v17.angular.io/guide/frequent-ngmodules?utm_source=chatgpt.com "Frequently-used modules"
[10]: https://nartc.me/blog/create-injection-token/?utm_source=chatgpt.com "Simplify Angular InjectionToken - Chau Tran"
[11]: https://sergeygultyayev.medium.com/working-with-providers-in-angular-eeb493151446?utm_source=chatgpt.com "Working with providers in Angular | by Sergey Gultyayev"


下面按行、按字段拆开讲透，同时补上可运行的最小示例与基于 RxJS 的实战用法。为避免机械感，我会把概念串到同一条叙事主线里：通过一个 InjectionToken 聚合多种策略类，形成一个可扩展且可测试的页面规范化流水线。

用 @NgModule 注册多重提供者：逐行深拆 providers、useClass 与 multi: true 的工作原理

紫薇堂堂主

其他

深入解析Angular中@NgModule的providers配置，重点讲解multi:true实现多重依赖注入，通过InjectionToken聚合多种策略类，构建可扩展的页面处理流水线。涵盖useClass用法、RxJS串联策略、模块化设计等核心概念。

TypeScript

编译器

路由

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云AI代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

功能1上新10个字符

功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符。

功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符。

功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符

功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符

功能4上新

文章&问答评论现已支持表情

全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验

社区富文本编辑器全新改版！诚邀体验～ 

精选全网热门MCP server，让你的AI更好用 🚀

💥开发者 MCP广场重磅上线！

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

用 @NgModule 注册多重提供者：逐行深拆 providers、useClass 与 multi: true 的工作原理-腾讯云开发者社区-腾讯云

用 @NgModule 注册多重提供者：逐行深拆 providers、useClass 与 multi: true 的工作原理

用 @NgModule 注册多重提供者：逐行深拆 providers、useClass 与 multi: true 的工作原理

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐