¿Cómo funciona la inyección de dependencias jerárquica de Angular?

Question

Accepted Answer

El DI de Angular es **jerárquico**: los inyectores forman un árbol que refleja el árbol de componentes/módulos. Cuando un componente solicita una dependencia, Angular recorre **hacia arriba** el árbol de inyectores hasta encontrar un proveedor — que controla si obtienes una instancia singleton compartida o una instancia separada por componente. ## La jerarquía del inyector ```text Root injector (app-wide) ← providedIn: 'root' lives here (one singleton) └─ Module/Route injectors └─ Component injector ← providers: [...] in @Component └─ Child component injector ``` Una búsqueda comienza en el componente solicitante y asciende a la raíz. El **primer** proveedor encontrado gana. ## Dónde proporcionas determina el alcance ```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 {} ``` Esta es la palanca clave: `providedIn: 'root'` da una única instancia compartida; listar un proveedor en el array `providers` de un componente crea una nueva instancia limitada a ese subárbol de componentes (útil para aislar el estado por componente). ## Modificadores de inyección ```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 ) {} ``` Estos decoradores controlan *qué tan lejos* Angular busca en el árbol de inyectores — p.ej. `@Optional` evita un error cuando falta una dependencia, `@SkipSelf` fuerza el uso de la instancia de un padre. ## Tokens de inyección para dependencias no-clase ```ts export const API_URL = new InjectionToken("apiUrl"); // provide: { provide: API_URL, useValue: "https://api.example.com" } constructor(@Inject(API_URL) private apiUrl: string) {} ``` Los tokens te permiten inyectar valores/configuración (no solo clases) e intercambiar implementaciones (`useClass`, `useValue`, `useFactory`). ## Por qué es importante Comprender el inyector jerárquico explica *por qué* un servicio se comparte en toda la aplicación versus se duplica por componente — una fuente frecuente de confusión "¿por qué estos componentes comparten/no comparten estado?". Controlar el alcance del proveedor (`root` vs `providers` del componente), usar modificadores (`@Optional`, `@SkipSelf`) y tokens de inyección para configuración/implementaciones intercambiables es lo que hace que el DI de Angular sea potente tanto para la arquitectura como para las pruebas.