Angular को hierarchical dependency injection कसरी काम गर्छ?

Question

Accepted Answer

Angular को DI **hierarchical** हो: injectors एक रुख बनाउँछ जसले component/module रुख को प्रतिबिम्ब गर्छ। जब एक component ले dependency माग गर्छ, Angular **माथी** injector रुख मा हिँड्छ जबसम्म यो एक provider फेला पार्दछ — जसले नियन्त्रण गर्छ कि तपाईंले एक साझा singleton पनि पनि प्राप्त गर्नुहुन्छ वा प्रत्येक component को लागि अलग उदाहरण। ## Injector को पदानुक्रम ```text Root injector (app-wide) ← providedIn: 'root' lives here (one singleton) └─ Module/Route injectors └─ Component injector ← providers: [...] in @Component └─ Child component injector ``` एक lookup requesting component मा सुरु हुन्छ र root मा बुलबुले हुन्छ। **पहिलो** provider फेला पर्दा जित्छ। ## तपाईं कहाँ provide गर्नुहुन्छ यस ले scope निर्धारण गर्छ ```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 {} ``` यो मुख्य उपकरण हो: `providedIn: 'root'` ले एक साझा उदाहरण दिन्छ; एक component को `providers` array मा एक provider को सूची एक नयाँ उदाहरण बनाउँछ जो त्यो component subtree मा scoped हुन्छ (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 नियन्त्रण गर्छ कि Angular *कति गहिरो* injector रुख को खोज गर्छ — जस्तै `@Optional` ले एक dependency हराएको समयमा एक त्रुटि हराउँछ, `@SkipSelf` ले आफ्नो parent को उदाहरण प्रयोग गर्न बाध्य गर्छ। ## Non-class dependencies को लागि Injection tokens ```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 तपाईंलाई values/config (केवल classes होइन) inject गर्न दिन्छ र implementations swap गर्न दिन्छ (`useClass`, `useValue`, `useFactory`)। ## यो किन महत्त्वपूर्ण छ Hierarchical injector बुझ्दा यस कुरा व्याख्या गर्छ कि किन एक service app-wide साझा छ वा component प्रति duplicate छ — "किन यी components स्थिति साझा/साझा नगरी छन्?" को भ्रम को एक सामान्य स्रोत। Provider scope नियन्त्रण गर्दा (`root` बनाम component `providers`), modifiers (`@Optional`, `@SkipSelf`) प्रयोग गर्दा, र config/swappable implementations को लागि injection tokens Angular को DI को दुवै architecture र testing को लागि शक्तिशाली बनाउँछ।