Hoe werkt Angular's hiërarchische dependency injection?

Question

Accepted Answer

Angular's DI is **hiërarchisch**: injectors vormen een boom die de component/module boom weerspiegelt. Wanneer een component een afhankelijkheid aanvraagt, loopt Angular **omhoog** in de injector boom totdat het een provider vindt — die bepaalt of u een gedeeld singleton krijgt of een apart exemplaar per component. ## De injector hiërarchie ```text Root injector (app-wide) ← providedIn: 'root' lives here (one singleton) └─ Module/Route injectors └─ Component injector ← providers: [...] in @Component └─ Child component injector ``` Een lookup begint bij de aanvragende component en bruist omhoog naar de root. De **eerste** gevonden provider wint. ## Waar u levert bepaalt het bereik ```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 {} ``` Dit is de belangrijkste hefboom: `providedIn: 'root'` geeft een enkel gedeeld exemplaar; het vermelden van een provider in de `providers` array van een component creëert een nieuw exemplaar dat is begrensd tot die component subtree (nuttig voor het isoleren van state per component). ## Injection modifiers ```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 ) {} ``` Deze decorators bepalen *hoe ver* Angular de injector boom doorzoekt — bijv. `@Optional` voorkomt een fout wanneer een afhankelijkheid ontbreekt, `@SkipSelf` forceert het gebruik van een parent's exemplaar. ## Injection tokens voor niet-class afhankelijkheden ```ts export const API_URL = new InjectionToken("apiUrl"); // provide: { provide: API_URL, useValue: "https://api.example.com" } constructor(@Inject(API_URL) private apiUrl: string) {} ``` Tokens laten u waarden/configuratie injecteren (niet alleen classes) en implementaties omschakelen (`useClass`, `useValue`, `useFactory`). ## Waarom het belangrijk is Het begrijpen van de hiërarchische injector verklaart *waarom* een service app-breed wordt gedeeld versus per component wordt verdubbeld — een veel voorkomende bron van "waarom delen/delen deze componenten state of niet?" verwarring. Het controleren van provider bereik (`root` vs component `providers`), het gebruik van modifiers (`@Optional`, `@SkipSelf`), en injection tokens voor configuratie/uitwisselbare implementaties is wat Angular's DI krachtig maakt voor zowel architectuur als testen.