Как работает иерархическое внедрение зависимостей в Angular?

Question

Accepted Answer

DI в Angular **иерархичен**: инжекторы образуют дерево, отражающее структуру компонентов/модулей. Когда компонент запрашивает зависимость, Angular поднимается **вверх** по дереву инжекторов до тех пор, пока не найдет провайдер — который определяет, получите ли вы одноэкземплярный синглтон или отдельный экземпляр для каждого компонента. ## Иерархия инжектора ```text Root injector (app-wide) ← providedIn: 'root' lives here (one singleton) └─ Module/Route injectors └─ Component injector ← providers: [...] in @Component └─ Child component injector ``` Поиск начинается в запрашивающем компоненте и поднимается до корня. **Первый** найденный провайдер побеждает. ## Место размещения провайдера определяет область видимости ```ts // 1. App-wide singleton — ONE instance shared everywhere @Injectable({ providedIn: "root" }) export class AuthService {} // 2. Component-scoped — a NEW instance per component (and its children) @Component({ selector: "app-widget", providers: [DataService], // each gets its OWN DataService }) export class WidgetComponent {} ``` Это основной рычаг управления: `providedIn: 'root'` создает один общий экземпляр; указание провайдера в массиве `providers` компонента создает новый экземпляр, ограниченный поддеревом этого компонента (полезно для изоляции состояния для каждого компонента). ## Модификаторы внедрения ```ts constructor( @Optional() private logger: Logger, // null instead of error if not provided @Self() private local: LocalService, // only look in THIS injector @SkipSelf() private parent: ParentService, // skip self, start at the parent @Host() private host: HostService, // stop at the host component ) {} ``` Эти декораторы управляют *глубиной* поиска в дереве инжекторов — например, `@Optional` избегает ошибки, если зависимость отсутствует, `@SkipSelf` принудительно использует экземпляр родителя. ## Токены внедрения для не-классовых зависимостей ```ts export const API_URL = new InjectionToken("apiUrl"); // provide: { provide: API_URL, useValue: "https://api.example.com" } constructor(@Inject(API_URL) private apiUrl: string) {} ``` Токены позволяют внедрять значения/конфигурацию (не только классы) и менять реализации (`useClass`, `useValue`, `useFactory`). ## Почему это важно Понимание иерархического инжектора объясняет *почему* сервис общий для приложения или дублируется для каждого компонента — частый источник путаницы "почему эти компоненты делят/не делят состояние?". Управление областью видимости провайдера (`root` vs компонент `providers`), использование модификаторов (`@Optional`, `@SkipSelf`) и токенов внедрения для конфигураций/заменяемых реализаций — именно это делает DI в Angular мощным инструментом как для архитектуры, так и для тестирования.