Jinsi gani Angular's hierarchical dependency injection inavyofanya kazi?

Question

Accepted Answer

Angular's DI ni **hierarchical**: injectors huundwa mti inayolingana na miti ya component/module. Wakati component inapoombaka dependency, Angular hutembea **juu** katika mti wa injector hadi kupata provider — ambayo inadhibiti kama umepata shared singleton au instance tofauti kwa component. ## Injector hierarchy ```text Root injector (app-wide) ← providedIn: 'root' lives here (one singleton) └─ Module/Route injectors └─ Component injector ← providers: [...] in @Component └─ Child component injector ``` Mkakati huanzia kwenye component inayoomba na kupaa hadi kwenye root. **Provider** ya kwanza iliyopatikana inashinda. ## Mahali pa kukamatia imedhamini uwanja ```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 {} ``` Hii ndio kiungo muhimu: `providedIn: 'root'` inatoa instance moja iliyoshirikiwa; kuorodhesha provider katika `providers` array ya component huunda instance mpya iliyofungwa kwa hiyo subtree ya component (muhimu kwa kusambaza state kwa 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 ) {} ``` Decorators hizi zinadhibiti *jinsi gani kwa mbali* Angular inatafuta mti wa injector — mfano `@Optional` huepusha hitilafu wakati dependency haipo, `@SkipSelf` kulazimisha kutumia instance ya parent. ## Injection tokens kwa dependencies zisizo-class ```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 zinakuruhusu kusambaza values/config (sio tu classes) na kubadilisha implementations (`useClass`, `useValue`, `useFactory`). ## Kwa nini inahitaji maana Kuelewa injector ya hierarchical kunaeleza *kwa nini* service inashirikiwa kwa aplikacao nzima dhidi ya kurudia kwa component — chanzo cha kawaida cha "kwa nini components hizi zinashiriki/hazishiriki state?" kuchanganywa. Kudhibiti uwanja wa provider (`root` dhidi ya component `providers`), kutumia modifiers (`@Optional`, `@SkipSelf`), na injection tokens kwa config/swappable implementations ndio inayofanya Angular's DI kuwa wenye nguvu kwa architecture na testing.