Πώς λειτουργεί η ιεραρχική έγχυση εξαρτήσεων του Angular;

Question

Accepted Answer

Το DI του Angular είναι **ιεραρχικό**: οι injectors σχηματίζουν ένα δέντρο που αντικατοπτρίζει το δέντρο συστατικών/ενοτήτων. Όταν ένα συστατικό ζητάει μια εξάρτηση, το Angular περπατά **προς τα πάνω** στο δέντρο των injectors μέχρι να βρει έναν πάροχο — ο οποίος ελέγχει εάν λαμβάνετε μια κοινόχρηστη singleton ή μια отдельная instance ανά συστατικό. ## Η ιεραρχία του injector ```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'` δίνει μια μόνη κοινόχρηστη instance· η αναγραφή ενός παρόχου στον πίνακα `providers` ενός συστατικού δημιουργεί μια νέα instance που περιορίζεται σε αυτό το υποδέντρο συστατικού (χρήσιμο για την απομόνωση της κατάστασης ανά συστατικό). ## Τροποποιητές έγχυσης ```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 αναζητά το δέντρο των injectors — π.χ. `@Optional` αποφεύγει ένα σφάλμα όταν λείπει μια εξάρτηση, `@SkipSelf` επιβάλλει τη χρήση της instance ενός γονέα. ## Έγχυση token για μη-κλάσης εξαρτήσεις ```ts export const API_URL = new InjectionToken("apiUrl"); // provide: { provide: API_URL, useValue: "https://api.example.com" } constructor(@Inject(API_URL) private apiUrl: string) {} ``` Τα token σας επιτρέπουν να εγχύσετε τιμές/ρυθμίσεις (όχι μόνο κλάσεις) και να αλλάξετε εφαρμογές (`useClass`, `useValue`, `useFactory`). ## Γιατί σημαίνει Η κατανόηση του ιεραρχικού injector εξηγεί *γιατί* μια υπηρεσία είναι κοινή σε όλη την εφαρμογή έναντι του αντιγράφονται ανά συστατικό — μια συχνή πηγή σύγχυσης "γιατί αυτά τα συστατικά δεν μοιράζονται/δεν μοιράζονται την κατάσταση;". Η έλεγχος του πεδίου εφαρμογής του παρόχου (`root` έναντι συστατικού `providers`), η χρήση τροποποιητών (`@Optional`, `@SkipSelf`) και έγχυσης token για ρυθμίσεις/εναλλάξιμες εφαρμογές είναι αυτό που κάνει το DI του Angular ισχυρό για αρχιτεκτονική και δοκιμές.