Angular Academy · درس

الدالة inject

حلّوا التبعيات باستخدام الدالة inject

الدالة inject درس مجاني في Angular Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Angular Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Angular Academy 4 دروس في المجموع.

دالة inject

تسترد الدالة inject() تبعية من الحاقن. وهي البديل الحديث لحقن التبعيات عبر معاملات الباني.

الاستخدام الأساسي

استدعوا inject مع الفئة المطلوبة، ثم أسندوا النتيجة إلى حقل.

import { Component, inject } from '@angular/core';
import { DataService } from './data.service';

@Component({ selector: 'app-x', template: '' })
export class XComponent {
  private data = inject(DataService);
}

مقارنةً بحقن الباني

يعرّف الأسلوب الأقدم التبعيات على أنها معاملات للباني. أما inject() فيؤدي المهمة نفسها التي يؤديها مهيّئ الحقل، وغالبًا ما يكون ذلك أوضح.

// old style:
// constructor(private data: DataService) {}

أين يمكن استدعاء inject؟

يجب تشغيل inject() ضمن سياق حقن: أثناء إنشاء مكوّن أو توجيه أو خدمة، أو داخل مهيّئات الحقول ودوال إنشاء المزوّدات.

الحقن في خدمة

استخدموا inject داخل الخدمات أيضًا، مثلًا للحصول على HttpClient.

import { Injectable, inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({ providedIn: 'root' })
export class Api {
  private http = inject(HttpClient);
}

تعليمة برمجية أقل

باستخدام inject، تتجنبون تواقيع الباني الطويلة. وتصبح كل تبعية مجرد تعريف حقل بسيط يسهل قراءته وإعادة ترتيبه.

استخدام الخدمات المحقونة

بعد الحقن، استدعوا الخدمة كما تستدعون أي كائن.

export class XComponent {
  private store = inject(CounterStore);
  add() { this.store.increment(); }
}

inject في حواجز المسارات الوظيفية

تعمل حواجز المسارات الوظيفية وحلّالاتها ضمن سياق حقن، لذا يمكنكم استدعاء inject داخلها للوصول إلى الخدمات.

// export const authGuard = () => {
//   const auth = inject(AuthService);
//   return auth.isLoggedIn();
// };

التبعيات الاختيارية

تقبل inject خيارات، مثل وضع علامة على تبعية باعتبارها اختيارية، بحيث تُرجع null بدلًا من إلقاء خطأ عند عدم توفيرها.

// const logger = inject(Logger, { optional: true });

خارج سياق الحقن

يؤدي استدعاء inject خارج سياق الحقن، مثلًا داخل دالة استدعاء setTimeout، إلى إلقاء خطأ. التقطوا التبعية أثناء الإنشاء بدلًا من ذلك.

لماذا نفضّل inject؟

تعمل inject جيدًا مع mixins والفئات الأساسية وواجهات API الوظيفية، وتحافظ على إيجاز فئات المكوّنات. وهي النهج الموصى به في Angular الحديثة.

تحقّق سريع: inject

استرداد تبعية.

مراجعة: inject

تعلّمتم استخدام الدالة inject() بوصفها الطريقة الحديثة للحصول على التبعيات، ويمكن استخدامها في المكوّنات والخدمات وحواجز المسارات الوظيفية ضمن سياق حقن. وهي تقلل التعليمات البرمجية الزائدة مقارنةً بحقن الباني، وتدعم خيارات مثل optional. التالي: المزوّدات والنطاقات.

الأسئلة الشائعة

هل درس «الدالة inject» مجاني؟

نعم — نص درس «الدالة inject» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Angular Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Angular Academy 4 دروس في المجموع.

ماذا ستتعلم في «الدالة inject»؟

حلّوا التبعيات باستخدام الدالة inject تتمرن على Angular Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Angular Academy؟

لا تُشترط خبرة سابقة. Angular Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.

كم من الوقت يستغرق درس «الدالة inject»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Angular Academy هذا؟

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

جميع الدروس في هذه الدورة

← العودة إلى Angular Academy