Come funziona l'iniezione delle dipendenze gerarchica di Angular?

Question

Accepted Answer

L'iniezione delle dipendenze di Angular è **gerarchica**: gli injector formano un albero che rispecchia l'albero dei componenti/moduli. Quando un componente richiede una dipendenza, Angular risale l'albero degli injector fino a trovare un provider — che controlla se ottieni un singleton condiviso o un'istanza separata per componente. ## La gerarchia degli injector ```text Root injector (app-wide) ← providedIn: 'root' lives here (one singleton) └─ Module/Route injectors └─ Component injector ← providers: [...] in @Component └─ Child component injector ``` Una ricerca inizia dal componente richiedente e risale fino alla radice. Il **primo** provider trovato vince. ## Dove fornisci determina l'ambito ```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 {} ``` Questa è la leva principale: `providedIn: 'root'` dà una singola istanza condivisa; elencare un provider nell'array `providers` di un componente crea un'istanza nuova limitata al sottoalbero di quel componente (utile per isolare lo stato per componente). ## Modificatori di iniezione ```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 ) {} ``` Questi decoratori controllano *quanto lontano* Angular cerca l'albero degli injector — ad esempio `@Optional` evita un errore quando una dipendenza manca, `@SkipSelf` forza l'uso dell'istanza di un genitore. ## Token di iniezione per dipendenze non-classe ```ts export const API_URL = new InjectionToken("apiUrl"); // provide: { provide: API_URL, useValue: "https://api.example.com" } constructor(@Inject(API_URL) private apiUrl: string) {} ``` I token ti permettono di iniettare valori/configurazione (non solo classi) e scambiare implementazioni (`useClass`, `useValue`, `useFactory`). ## Perché è importante Comprendere l'injector gerarchico spiega *perché* un servizio è condiviso a livello di app vs duplicato per componente — una fonte frequente di confusione "perché questi componenti condividono/non condividono lo stato?". Controllare l'ambito del provider (`root` vs componente `providers`), usare modificatori (`@Optional`, `@SkipSelf`), e token di iniezione per configurazione/implementazioni scambiabili è quello che rende potente l'iniezione delle dipendenze di Angular sia per l'architettura che per i test.