Angular Academy · درس

استيراد التبعيات مباشرةً

أضيفوا الاستيرادات إلى المكوّن بدلًا من الوحدة

الدرس 3 من 413 خطوة

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

استيراد التبعيات مباشرةً

يعلن standalone component عما يستخدمه في مصفوفة imports الخاصة به. وهذا يحل محل الفصل بين declarations وimports في NgModule.

مصفوفة imports

أضف standalone components وdirectives وpipes الأخرى إلى مصفوفة imports في decorator ‏@Component.

import { Component } from '@angular/core';
import { ChildComponent } from './child.component';

@Component({
  selector: 'app-parent',
  imports: [ChildComponent],
  template: '<app-child></app-child>'
})
export class ParentComponent {}

استيراد مكوّنات أخرى

لعرض child component في القالب، استورد class الخاص به. بعد ذلك يصبح selector الخاص به قابلًا للاستخدام.

استيراد Directives

تُستورد standalone directives بالطريقة نفسها. وبعد استيرادها، يمكنك تطبيقها في القالب.

import { Component } from '@angular/core';
import { HighlightDirective } from './highlight.directive';

@Component({
  selector: 'app-note',
  imports: [HighlightDirective],
  template: '<p appHighlight>Note</p>'
})
export class NoteComponent {}

استيراد Pipes

تُضاف standalone pipes أيضًا إلى imports. فعلى سبيل المثال، يتيح استيراد custom pipe استخدامه في interpolation.

Angular Directives الشائعة

تأتي بعض الأدوات المضمّنة من حزم. فعلى سبيل المثال، يأتي RouterLink من @angular/router، ويجب استيراده لاستخدامه.

import { RouterLink } from '@angular/router';

@Component({
  selector: 'app-nav',
  imports: [RouterLink],
  template: '<a routerLink="/home">Home</a>'
})
export class NavComponent {}

FormsModule وما شابه

يمكنك أيضًا استيراد NgModules الموجودة إلى standalone component. ويؤدي استيراد FormsModule إلى تفعيل ميزات النماذج المعتمدة على القالب، مثل ngModel.

import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-form',
  imports: [FormsModule],
  template: '<input [(ngModel)]="name">'
})
export class FormComponent {
  name = '';
}

لا يحتاج Built-in Control Flow إلى استيراد

تُعد كتل built-in control flow ‏(if وfor وswitch وdefer) جزءًا من لغة القوالب نفسها، لذا فهي لا تتطلب أي استيراد. ويختلف ذلك عن structural directives الأقدم.

استورد ما تستخدمه فقط

حافظ على imports بالحد الأدنى: أدرج التبعيات التي يشير إليها القالب فعليًا فقط. فهذا يبقي المكوّنات خفيفة وقابلة لـ tree-shaking.

استيراد عناصر متعددة

يمكن لمصفوفة imports إدراج عناصر عديدة معًا.

imports: [ChildComponent, HighlightDirective, RouterLink, FormsModule]

توجّهك أخطاء التجميع

إذا استخدمت selector أو pipe لم تستورده، تعرض Angular خطأً واضحًا يخبرك بأنه غير معروف في ذلك المكوّن. أضفه إلى imports لإصلاح المشكلة.

اختبار سريع: Imports

أين توضع تبعيات standalone؟

أجب عليها في الدرس التفاعلي

مراجعة: الاستيراد المباشر

تدرج standalone components تبعياتها في مصفوفة imports الخاصة بالمكوّن: مكوّنات أخرى وdirectives وpipes وحتى NgModules مثل FormsModule. ولا يحتاج built-in control flow إلى استيراد. حافظ على imports بالحد الأدنى. التالي: تشغيل تطبيق standalone.

البدء مجانًا

تعلم HTML مع معلم ذكاء اصطناعي — مجانًا

اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.

الدورات: 38
الدروس: 144

ابدأ التعلم مجانًا عرض الدورة الكاملة

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

هل درس «استيراد التبعيات مباشرةً» مجاني؟

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

ماذا ستتعلم في «استيراد التبعيات مباشرةً»؟

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

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

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

كم من الوقت يستغرق درس «استيراد التبعيات مباشرةً»؟

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

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

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

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

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