Hvordan fungerer Angulars hierarkiske avhengighetsinjeksjon?

Question

Accepted Answer

Angulars DI er **hierarkisk**: injektorer danner et tre som gjenspeiler komponenten/modultreet. Når en komponent ber om en avhengighet, går Angular **oppover** injektortræet til det finner en tilbyder — som kontrollerer om du får en delt singleton eller en separat forekomst per komponent. ## Injektoren hierarki ```text Root injector (app-wide) ← providedIn: 'root' lives here (one singleton) └─ Module/Route injectors └─ Component injector ← providers: [...] in @Component └─ Child component injector ``` En oppslag starter ved den forespørrende komponenten og bobler opp til roten. Den **første** funnet tilbyderen vinner. ## 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 viktigste spaken: `providedIn: 'root'` gir en enkelt delt forekomst; oppføring av en tilbyder i en komponents `providers` array lager en frisk forekomst begrenset til det komponentuttreet (nyttig for å isolere tilstand per komponent). ## Injeksjonsmodifikatorer ```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 dekoratørene kontrollerer *hvor langt* Angular søker injektortræet — f.eks. `@Optional` unngår en feil når en avhengighet mangler, `@SkipSelf` tvinger bruk av en foreldres forekomst. ## Injeksjonstokens for ikke-klasseavhengigheter ```ts export const API_URL = new InjectionToken("apiUrl"); // provide: { provide: API_URL, useValue: "https://api.example.com" } constructor(@Inject(API_URL) private apiUrl: string) {} ``` Tokener lar deg injisere verdier/konfig (ikke bare klasser) og bytte implementeringer (`useClass`, `useValue`, `useFactory`). ## Hvorfor det betyr noe Å forstå det hierarkiske injektøren forklarer *hvorfor* en tjeneste deles appvidt versus duplisert per komponent — en hyppig kilde til "hvorfor deler/deler ikke disse komponentene tilstand?" forvirring. Kontrollering av tilbyderomfang (`root` vs komponent `providers`), bruk av modifikatorer (`@Optional`, `@SkipSelf`), og injeksjonstokens for konfig/utbyttbare implementeringer er det som gjør Angulars DI kraftig for både arkitektur og testing.