როგორ მუშაობს Angular-ის იერარქიული დამოკიდებულების ინჯექცია?

Question

Accepted Answer

Angular-ის დამოკიდებულების ინჯექცია **იერარქიული** არის: ინჯექტორები ქმნიან ხეს, რომელიც ასახავს კომპონენტის/მოდულის ხეს. როდესაც კომპონენტი ითხოვს დამოკიდებულებას, 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` იძულებთ იყენებთ მშობლის ინსტანციას. ## ინჯექციის 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-ები საშუალებას გაძლევთ ინჯექტ გააკეთოთ მნიშვნელობები/კონფიგურაცია (მხოლოდ არა კლასები) და შეცვალოთ აღებული მეთოდები (`useClass`, `useValue`, `useFactory`). ## რატომ მნიშვნელოვანია იერარქიული ინჯექტორის გაგება ხსნის *რატომ* არის სერვის გაზიარებული მთელ აპლიკაციაში vs დუბლირებული კომპონენტზე — ცხელი წყარო "რატომ ზიარებენ ან არ ზიარებენ ეს კომპონენტები მდგომარეობას?" დაბნეულობისთვის. პროვაიდერის ფარგლებების აკონტროლი (`root` vs კომპონენტი `providers`), მოდიფიკატორების გამოყენება (`@Optional`, `@SkipSelf`), და ინჯექციის tokens კონფიგურაციისთვის/ცვალებად აღებული მეთოდებისთვის არის რაც ხდის Angular-ის დამოკიდებულების ინჯექციას მძლავრს არქიტექტურისა და ტესტირებისთვის.