Angular ની પદાનુક્રમીય અવલંબન ઇંજેક્શન કેવી રીતે કામ કરે છે?

Question

Accepted Answer

Angular ની DI **પદાનુક્રમીય** છે: ઇંજેક્ટર એક વૃક્ષ બનાવે છે જે ઘટક/મોડ્યુલ વૃક્ષને પ્રતિબિંબિત કરે છે. જ્યારે ઘટક અવલંબન માંગે છે, Angular ઇંજેક્ટર વૃક્ષ **અપ** જાય છે જ્યાં સુધી તે પ્રદાતા શોધે છે — જે નિયંત્રણ કરે છે કે તમને શેર કરેલ સિંગલટન અથવા પ્રતિ ઘટક અલગ ઉદાહરણ મળે છે. ## ઇંજેક્ટર હાયરાર્કી ```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 શક્તિશાળી બનાવે છે.