Angular యొక్క సోపాన నిర్ভరత ఇంజెక్షన్ ఎలా పనిచేస్తుంది?

Question

Accepted Answer

Angular యొక్క DI **సోపానక్రమ**: ఇంజెక్టర్లు component/module చెట్టును ప్రతిబింబించే చెట్టును ఏర్పరుస్తాయి. ఒక component ఆధారపడటను అభ్యర్థించినప్పుడు, Angular ఒక ప్రదాతను కనుగొనే వరకు ఇంజెక్టర్ చెట్టు **పైకి** నడుస్తుంది — ఇది మీరు ఒక భాగస్వామ్య singleton లేదా component కు ప్రతి తాజా ఇన్‌స్టాన్స్‌ను పొందుతున్నారో అని నియంత్రిస్తుంది. ## ఇంజెక్టర్ సోపానక్రమం ```text Root injector (app-wide) ← providedIn: 'root' lives here (one singleton) └─ Module/Route injectors └─ Component injector ← providers: [...] in @Component └─ Child component injector ``` ఒక అన్వేషణ అభ్యర్థించిన componentలో ప్రారంభమవుతుంది మరియు root వరకు ఉగిలిపోతుంది. **ముందుగా** కనిపించిన ప్రదాత విజయం పొందుతుంది. ## మీరు ఎక్కడ అందించారు అనేది పరిధిని నిర్ణయిస్తుంది ```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 లో ప్రదాతను జాబితా చేయడం ఆ component subtree కు పరిమితమైన ఒక తాజా ఇన్‌స్టాన్స్‌ను సృష్టిస్తుంది (component కు state ను వేరు చేయడానికి ఉపయోగకరమైనది). ## ఇంజెక్షన్ మాడిఫైయర్లు ```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`). ## ఎందుకు ఇది ముఖ్యమైనది సోపాన ఇంజెక్టర్‌ను అర్థం చేసుకోవడం ఎప్పుడు ఒక సేవ యాప్‌పు అంతటా భాగస్వామ్యం చేయబడుతుందో వర్సెస్ component కు డూప్లికేట్ చేయబడుతుందో — "ఈ components state ను భాగస్వామ్యం చేయు/చేయవు?" గందరగోళం యొక్క ఆధిక్య కారణం. ప్రదాత పరిధిని నియంత్రించడం (`root` వర్సెస్ component `providers`), మాడిఫైయర్‌లను ఉపయోగించడం (`@Optional`, `@SkipSelf`), మరియు కాన్ఫిగ్/పరిమాణ చేయదగిన అమలుల కోసం ఇంజెక్షన్ టోకన్‌లు Angular యొక్క DI ను ఆర్కిటెక్చర్ మరియు పరీక్షకు శక్తిశాలిగా చేస్తుంది.