ما الذي يمكن وضعه في آلية حقن التبعية في Angular؟

يمكن لكل مطور Angular تقريبًا إيجاد حل لمشكلتهم في Dependency Injection. ظهر هذا بوضوح في التعليقات على مقالتي الأخيرة . نظر الناس في الخيارات المختلفة للعمل مع البيانات من DI ، وقارنوا ما يناسبهم من موقف معين. هذا أمر رائع لأن هذه الأداة البسيطة تمنحنا الكثير من الاحتمالات.



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



دعنا نلقي نظرة أعمق على هذه الآلية في Angular.

هل تعرف ادمانك؟

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



على سبيل المثال ، ألق نظرة على هذه الفئة الزائفة واحسب عدد التبعيات التي تمتلكها:

import { API_URL } from '../../../env/api-url';
import { Logger } from '../../services/logger';
 
class PseudoClass {
   request() {
       fetch(API_URL).then(...);
   }
 
   onError(error) {
       const logger = new Logger();
 
       logger.log(document.location, error);
   }
}

وما الخطأ، ما المشكلة؟

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



موقف آخر: سيعمل المستند والجلب بسلاسة في متصفحك. ولكن إذا احتجت يومًا ما إلى نقل التطبيق إلى Server Side Rendering ، فقد لا تكون المتغيرات العامة الضرورية في بيئة nodejs.

إذن ما هو DI ولماذا هو مطلوب؟

يقوم Dependency Injection بإدارة التبعيات داخل التطبيق. بالنسبة لنا ، كمطورين Angular ، فإن هذا النظام بسيط جدًا. هناك عمليتان رئيسيتان: وضع شيء ما في شجرة التبعية أو الحصول على شيء منها.



للحصول على منظور أكثر نظريًا حول DI ، اقرأ عن عكس مبدأ التحكم . يمكنك أيضًا مشاهدة مقاطع فيديو شيقة حول الموضوع: سلسلة مقاطع فيديو حول IoC و DI من Ilya Klimov باللغة الروسية أو مقطع فيديو قصير حول IoC باللغة الإنجليزية.



كل السحر يأتي من الترتيب الذي نورد به ونأخذ التبعيات.



كيف تعمل النطاقات في DI:

ماذا يمكننا أن نضع في DI؟

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

توفير الطبقة

عادةً ما يعرف كل مطور Angular هذا. هذا هو الحال عند إضافة خدمة إلى تطبيق.



يُنشئ Angular مثيلاً للفئة عند طلبه لأول مرة. ومع الزاوي 6، فإننا يمكن أن الطبقات لا يكتب في مجموعة مزودي على الإطلاق، ولكن اقول الفئة نفسها عن مكان في DI يجب أن تذهب مع providedIn :

providers: [
   {
       provide: SomeService,
       useClass: SomeService
   },
   // Angular        :
   SomeService
]

تقديم القيم

يمكن أيضًا توفير القيم الثابتة عبر DI. يمكن أن تكون إما سلسلة بسيطة مع عنوان URL لواجهة برمجة التطبيقات الخاصة بك ، أو سلسلة معقدة يمكن ملاحظتها مع البيانات.



عادةً ما يتم تنفيذ توفير القيم جنبًا إلى جنب مع InjectionToken . هذا الكائن هو مفتاح محرك DI. أولاً ، تقول: "أريد الحصول على هذه البيانات لهذا المفتاح." وبعد ذلك تأتي إلى DI وتسأل: "هل يوجد شيء على هذا المفتاح؟"



حسنًا ، الحالة الشائعة هي إعادة توجيه البيانات العالمية من جذر التطبيق.



من الأفضل رؤيته أثناء العمل على الفور ، لذلك دعونا نلقي نظرة على stackblitz بمثال:







لذلك ، في المثال ، حصلنا على تبعية من DI بدلاً من استيرادها بشكل ثابت من ملف آخر مباشرةً. ولماذا هو أفضل لنا؟

• يمكننا تجاوز قيمة الرمز المميز على أي مستوى في شجرة DI دون تغيير المكونات التي تستخدمها.
• يمكننا أن نسخر من قيمة الرمز المميز بالبيانات المناسبة عند الاختبار.
• المكون معزول تمامًا وسيعمل دائمًا بنفس الطريقة بغض النظر عن السياق.

تجهيز المصانع

في رأيي ، هذه هي أقوى أداة في محرك حقن التبعية في Angular.



يمكنك إنشاء رمز مميز يكون نتيجة الجمع بين قيم الرموز المميزة الأخرى وتحويلها.



فيما يلي ملف stackbitz آخر مع مثال تفصيلي لإنشاء مصنع بتيار.







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

توفير مثيل موجود

ليست حالة شائعة ، ولكن هذا الخيار يمكن أن يكون أداة مفيدة للغاية.



يمكنك وضع كيان تم إنشاؤه بالفعل في الرمز المميز. يعمل بشكل جيد مع forwardRef .



انظر إلى مثال آخر على stackblitz مع توجيه يقوم بتنفيذ الواجهة واستبدال رمز آخر بـ useExisting. في هذا المثال ، نريد تجاوز قيمة الرمز المميز لـ DI فقط للمكونات الفرعية للعنصر الذي يعلق عليه التوجيه. علاوة على ذلك ، يمكن أن يكون التوجيه موجودًا - الشيء الرئيسي هو أنه يقوم بتنفيذ الواجهة المطلوبة.

الحيل DI Decorator

تتيح لك أدوات تزيين DI جعل استعلامات DI أكثر مرونة.



إذا كنت لا تعرف جميع المصممين الأربعة ، أوصي بقراءة هذا المقال على موقع Medium . المقالة باللغة الإنجليزية ، ولكن هناك تصورات رائعة ومفهومة حول الموضوع.



لا يعرف الكثير من الناس أيضًا أنه يمكن استخدام أدوات تزيين DI في مجموعة deps ، والتي تعد الحجج لمصنع المزودين.

providers: [
   {
     provide: SOME_TOKEN,
     /**
      *     ,  
      * [new Decorator(), new Decorator(),..., TOKEN]
      * .
      *
      *      ‘null’,     
      * OPTIONAL_TOKEN
      */
     deps: [[new Optional(), OPTIONAL_TOKEN]],
     useFactory: someTokenFactory
   }
 ]

مصنع توكن

يأخذ مُنشئ InjectionToken وسيطين.



الوسيطة الثانية هي كائن بتكوين رمز مميز.



مصنع التوكنات هي وظيفة تسمى اللحظة التي يطلب فيها شخص ما هذا الرمز لأول مرة. في ذلك ، يمكنك حساب قيمة قياسية معينة للرمز المميز أو حتى الوصول إلى كيانات DI الأخرى من خلال وظيفة الحقن.



ألق نظرة على مثال لتنفيذ وظيفة دفق النقر على الزر ، ولكن هذه المرة في مصنع الرمز المميز

خاتمة

يعد DI in Angular موضوعًا رائعًا: للوهلة الأولى ، لا يحتوي على العديد من الأدوات والأدوات المختلفة للتعلم ، ولكن يمكنك الكتابة والتحدث لساعات حول الاحتمالات والاستخدامات التي تقدمها لنا.



آمل أن تكون هذه المقالة قد أعطتك الأساس الذي يمكنك من خلاله التوصل إلى حلول خاصة بك لتبسيط العمل مع البيانات في تطبيقاتك ومكتباتك.