第七章：Dependency Injection —— 园区证件、调拨和供给系统 - 现代前后端完全指南：软件城市宇宙

Angular 最有“企业园区味”的地方，就是 Dependency Injection，依赖注入。

很多前端同学一开始会把它看成“有点玄学的拿实例方式”。
其实它一点不玄。它更像：

text

园区某栋楼需要一项服务
    │
    ▼
先查本楼服务台有没有
    │
    ├── 有：直接拿本楼实例
    └── 没有：沿着园区管理层往上找
               │
               ├── 找到：注入
               └── 找不到：报错

这就是 Angular 的层级注入器心智。

#1. 最常见的提供方式

@Injectable({
  providedIn: 'root',
})
export class AuditLogService {}

这表示：

这个服务挂到全园区根级别
默认单例
真被用到才进包，利于 tree-shaking

#2. 组件级 provider：某栋楼自己有独立窗口

@Component({
  selector: 'local-counter',
  standalone: true,
  template: `<p>{{ count }}</p>`,
  providers: [LocalCounterService],
})
export class LocalCounterComponent {
  private service = inject(LocalCounterService);
  count = this.service.value;
}

这意味着：

每个组件实例都可以拿到自己的服务实例
不会污染全园区共享状态

#3. Provider 不只是 class

Angular 的 DI 不只会注入类，还能注入配置、函数、常量：

import { InjectionToken } from '@angular/core';

export const CAMPUS_API_URL = new InjectionToken<string>('CAMPUS_API_URL');

bootstrapApplication(AppComponent, {
  providers: [
    { provide: CAMPUS_API_URL, useValue: '/api/campus' },
  ],
});

核心心智一句话：

DI 不是魔法拿对象，而是把“谁需要什么、从哪里拿、作用域多大”变成显式的园区供给体系。