Hur fungerar Angulars hierarkiska beroendeinjektion?

Question

Accepted Answer

Angulars DI är **hierarkisk**: injektorer bildar ett träd som speglar komponenten/modulträdet. När en komponent begär ett beroende, går Angular **upp** i injektorträdet tills den hittar en leverantör — som styr om du får en delad singleton-instans eller en separat instans per komponent. ## Injektorhierarkin ```text Root injector (app-wide) ← providedIn: 'root' lives here (one singleton) └─ Module/Route injectors └─ Component injector ← providers: [...] in @Component └─ Child component injector ``` En sökning börjar vid den begärande komponenten och bubblar upp till roten. Den **första** funna leverantören vinner. ## Var du tillhandahåller bestämmer omfattning ```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 {} ``` Detta är nyckelreglaget: `providedIn: 'root'` ger en enda delad instans; att lista en leverantör i en komponentes `providers`-array skapar en ny instans begränsad till det komponentträdet (användbart för att isolera tillstånd per komponent). ## Injektionsmodifierare ```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 ) {} ``` Dessa dekoratörer styr *hur långt* Angular söker injektorträdet — t.ex. `@Optional` undviker ett fel när ett beroende saknas, `@SkipSelf` tvingar användning av en förälders instans. ## Injektionsmarkörer för icke-klassberoenden ```ts export const API_URL = new InjectionToken("apiUrl"); // provide: { provide: API_URL, useValue: "https://api.example.com" } constructor(@Inject(API_URL) private apiUrl: string) {} ``` Markörer låter dig injicera värden/config (inte bara klasser) och byta implementeringar (`useClass`, `useValue`, `useFactory`). ## Varför det är viktigt Att förstå den hierarkiska injektorn förklarar *varför* en tjänst delas i hela appen kontra duplicerad per komponent — en vanlig källa till förvirring "varför delar/delar inte dessa komponenter tillstånd?". Kontrollering av leverantörsomfattning (`root` kontra komponenter `providers`), användning av modifierare (`@Optional`, `@SkipSelf`) och injektionsmarkörer för config/utbytbara implementeringar är vad som gör Angulars DI kraftfull för både arkitektur och testning.