تخزين المحقن باستخدام InjectionToken

باستخدام Angular، كان من المعتاد في السابق استخدام مثل هذه الأساليب لتخزين مثيلات المحقن واستخدامها في المكونات. في الإصدارات السابقة من Angular قبل RC5، كان بإمكانك تخزين مثيل المحقن كـ “appRef” واستخدامه كموجه للخدمات في مكوناتك. ومع ذلك، مع التغييرات التي جاءت مع RC5 وما بعده، أصبح الأمر أكثر تعقيدًا.

في السياق الجديد، تم تغيير طريقة تشغيل Angular وتحميل المكونات، مما يعني أن المكونات تبدأ في التنفيذ قبل استكمال عملية bootstrapModule().then(). وبالتالي، لا يمكن الاعتماد على تخزين مثيل المحقن في هذه المرحلة لاستخدامه في المكونات.

ومع ذلك، هناك بعض الطرق التي يمكن استخدامها لتحقيق الهدف المطلوب دون الحاجة إلى حقن المحقن في جميع المكونات:

أحد الطرق هو استخدام “InjectionToken” لتمرير المحقن إلى القوالب الرئيسية أو الأجزاء الرئيسية من التطبيق، ثم استخدامها في المكونات التي تحتاج إليها. هذا يمكن أن يكون مختلفًا عن حقن المحقن مباشرة في جميع المكونات.

على سبيل المثال، يمكنك تعريف InjectionToken كما يلي:

typescriptCopy code
import { InjectionToken } from '@angular/core';
export const MY_SERVICE_INJECTOR = new InjectionToken<any>('MY_SERVICE_INJECTOR');

ثم في تكوين الوحدة أو في الوحدة الجذرية، يمكنك توفير المحقن باستخدام InjectionToken:

typescriptCopy code
import { NgModule } from '@angular/core';
import { MY_SERVICE_INJECTOR } from './my-service-injector';
import { MyService } from './my-service';

@NgModule({
  providers: [
    MyService,
    { provide: MY_SERVICE_INJECTOR, useFactory: () => MyService.injector }
  ]
})
export class AppModule { }

ثم يمكنك استخدام هذا InjectionToken في المكونات التي تحتاج إلى الوصول إلى المحقن:

typescriptCopy code
import { Component, Inject } from '@angular/core';
import { MY_SERVICE_INJECTOR } from './my-service-injector';

@Component({
  selector: 'app-my-component',
  template: '...'
})
export class MyComponent {
  constructor(@Inject(MY_SERVICE_INJECTOR) private injector: any) {
    // القيام بالعمليات المطلوبة هنا باستخدام المحقن
  }
}

باستخدام هذا النهج، يمكنك تجنب حقن المحقن مباشرة في جميع المكونات واستخدام InjectionToken لنقل المحقن إلى المكونات التي تحتاج إليها، مما يجعل الكود أكثر إدارة وصيانة وسهولة في فهمه.

بالطبع، دعني أواصل توجيهك عبر المقال لمساعدتك في فهم العملية بشكل أعمق وتوضيح الطرق المختلفة التي يمكن استخدامها لتحقيق هذا الهدف.

في الأصل، كان استخدام محول الخدمة (“Service Locator”) كوسيلة للوصول إلى المحقن (“Injector”) شائعًا في Angular. ومع ذلك، مع التغييرات التي أحدثتها إصدارات Angular الحديثة، يجب التفكير في طرق بديلة لتحقيق نفس الغرض.

الطريقة المقترحة في المقال تستخدم “InjectionToken” لنقل المحقن من وحدة الطرف الثالث (third-party module) إلى المكونات التي تحتاج إليها. يتم ذلك عن طريق تعريف “InjectionToken” كعنصر يمكن حقنه في المكونات باستخدام ميزة الحقن في Angular.

باستخدام هذا النهج، يمكنك تجنب حاجة كل مكون إلى حقن المحقن مباشرة، وبدلاً من ذلك، يمكنك تمرير المحقن عبر العنصر المحدد (InjectionToken) إلى المكونات التي تحتاج إليها. هذا يحسن تنظيم الشفرة ويجعلها أكثر صيانة وسهولة في فهمها، خاصةً عندما يكون لديك عدد كبير من المكونات التي تحتاج إلى الوصول إلى المحقن.

ومن الجدير بالذكر أن استخدام InjectionToken يساعد في تحقيق فصل تبعيات البرنامج وتقليل التبعيات (Coupling) بين المكونات، مما يسهل فحص الوحدات واختبارها بشكل منفصل.

باختصار، استخدام InjectionToken يمثل نهجًا أكثر مرونة وصيانة لتمرير المحقن إلى المكونات في Angular، ويسمح بفصل تبعيات البرنامج وتحسين إدارة الشفرة.