كيف يعمل نظام حقن الاعتماديات الهرمي في Angular؟

Question

Accepted Answer

نظام DI في 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` يفرض استخدام مثيل الوالد. ## رموز الحقن للاعتماديات غير الفئات ```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`)، والرموز للإعدادات/التطبيقات القابلة للتبديل هو ما يجعل DI في Angular قويًا لكل من العمارة والاختبار.