Angular चा पदानुक्रमित अवलंबित्व इंजेक्शन कसे कार्य करते?

Question

Accepted Answer

Angular चे DI **पदानुक्रमित** आहे: इंजेक्टर एक वृक्ष बनवतात जो घटक/मॉड्यूल वृक्षाचे प्रतिबिंब आहे. जेव्हा एक घटक अवलंबित्व मागते, तेव्हा Angular एक प्रदाता शोधेपर्यंत इंजेक्टर वृक्षाच्या **वर** जाते — जो नियंत्रित करते की तुम्हाला सामायिक singleton मिळते किंवा प्रत्येक घटकाचे वेगळे उदाहरण मिळते. ## इंजेक्टर पदानुक्रम ```text Root injector (app-wide) ← providedIn: 'root' lives here (one singleton) └─ Module/Route injectors └─ Component injector ← providers: [...] in @Component └─ Child component injector ``` एक शोध विनंती करणार्या घटकावरून सुरू होतो आणि मूळपर्यंत बुडबुडते. सापडलेला **पहिला** प्रदाता जिंकतो. ## तुम्ही कोठे प्रदान करता ते व्याप्ती निर्धारित करते ```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'` एक सामायिक उदाहरण देते; घटकच्या `providers` अरेमध्ये एक प्रदाता सूचीबद्ध करणे त्या घटकाच्या उप-वृक्षाच्या व्याप्तीमध्ये एक नवीन उदाहरण तयार करते (घटक प्रति स्थिती वेगळे करण्यासाठी उपयोगी). ## इंजेक्शन संशोधक ```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 ) {} ``` हे सजावट Angular इंजेक्टर वृक्षामध्ये किती दूर शोधते हे नियंत्रित करते — उदा. `@Optional` अवलंबित्व गायब असताना त्रुटी टाळते, `@SkipSelf` मूळचे उदाहरण वापरण्यास सक्तीने करते. ## गैर-वर्ग अवलंबित्वांसाठी इंजेक्शन टोकन ```ts export const API_URL = new InjectionToken("apiUrl"); // provide: { provide: API_URL, useValue: "https://api.example.com" } constructor(@Inject(API_URL) private apiUrl: string) {} ``` टोकन तुम्हाला मूल्य/कॉन्फिगरेशन इंजेक्ट करण्यास (केवळ वर्ग नाही) आणि अंमलबजावणी स्वॅप करण्यास अनुमती देते (`useClass`, `useValue`, `useFactory`). ## हे का महत्वाचे आहे पदानुक्रमित इंजेक्टर समजून घेणे हे स्पष्ट करते की सेवा अँप-व्यापी सामायिक का आहे विरुद्ध घटक-प्रति-प्रती आहे — "या घटकांचे स्थिती सामायिक/गैर-सामायिक का आहे?" भ्रमचे वारंवार स्रोत. प्रदाता व्याप्ती नियंत्रित करणे (`root` विरुद्ध घटक `providers`), संशोधक वापरणे (`@Optional`, `@SkipSelf`), आणि कॉन्फिगरेशन/स्वॅपेबल अंमलबजावणीसाठी इंजेक्शन टोकन हे आहे जे Angular चे DI आर्किटेक्चर आणि चाचणी दोन्हीसाठी शक्तिशाली बनवते.