Hvordan fungerer Angulars hierarkiske afhængighedsinjektion?

Question

Accepted Answer

Angulars DI er **hierarkisk**: injektorer danner et træ, der afspejler komponent-/modultræet. Når en komponent anmoder om en afhængighed, går Angular **op** gennem injektortraet, indtil den finder en provider — som bestemmer, om du får en delt singleton eller en separat instans pr. komponent. ## Injektorkierarkiet ```text Root injector (app-wide) ← providedIn: 'root' lives here (one singleton) └─ Module/Route injectors └─ Component injector ← providers: [...] in @Component └─ Child component injector ``` Et opslag starter ved den anmodende komponent og bobler op til roden. Den **første** fundne provider vinder. ## Hvor du leverer bestemmer omfang ```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 {} ``` Dette er den vigtigste håndtag: `providedIn: 'root'` giver en enkelt delt instans; at angive en provider i en komponents `providers`-array opretter en ny instans, der er begrænset til det komponenttræ (brugbart til at isolere tilstand pr. komponent). ## Injektionsmodifikatorer ```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 ) {} ``` Disse dekoratorer styrer, *hvor langt* Angular søger injektortraet — fx `@Optional` undgår en fejl, når en afhængighed mangler, `@SkipSelf` tvinger brugen af en forælders instans. ## Injektionssymboler for ikke-klassafhængigheder ```ts export const API_URL = new InjectionToken("apiUrl"); // provide: { provide: API_URL, useValue: "https://api.example.com" } constructor(@Inject(API_URL) private apiUrl: string) {} ``` Symboler lader dig injicere værdier/konfiguration (ikke kun klasser) og bytte implementeringer (`useClass`, `useValue`, `useFactory`). ## Hvorfor det betyder noget At forstå det hierarkiske injektorudstyr forklarer, *hvorfor* en service er delt app-bredt i forhold til duplikeret pr. komponent — en hyppig årsag til "hvorfor deler/deler disse komponenter ikke tilstand?" forvirring. At kontrollere provider-omfang (`root` mod komponent `providers`), bruge modifikatorer (`@Optional`, `@SkipSelf`) og injektionssymboler til konfiguration/byttbar implementering er det, der gør Angulars DI kraftfuld for både arkitektur og testning.