كيفية استيراد المكونات والمكتبات داخل المكون المستقل

استيراد المكوناتالتبعيات المستقلةمصفوفة ImportsAngular 22.1,مكتبات أنجولرStandalone Imports

جدول مرجعي سريع

فئة التبعية	دورها في التطبيق	أمثلة عملية لمصفوفة الاستيرادات
مكونات فرعية	بناء واجهات متداخلة ومترابطة	HeaderComponent و ButtonComponent
أدوات العرض	التحكم في الشروط والتنسيق الفردي	NgIf و NgFor و DatePipe
حزم أنجولر	إدارة النماذج والروابط البرمجية	ReactiveFormsModule و RouterModule
مكتبات جاهزة	تسريع التصميم باستخدام واجهات خارجية	MatButtonModule و MatCardModule

الشرح

نصل إلى الدرس الخامس والذي يناقش أحد أهم الفروق الجوهرية في المعمارية الحديثة: إدارة التبعيات. في السابق، كنا نعتمد على ملفات NgModule المركزية لاستيراد المكتبات وتوفيرها لجميع مكونات التطبيق. أما في Angular 22.1 ومع المكونات المستقلة، أصبح كل مكون مسؤولاً عن استيراد ما يحتاجه فقط للعمل. يتم ذلك بوضوح تام من خلال مصفوفة imports الموجودة داخل مزخرف @Component، مما يجعل المكون قابلاً لإعادة الاستخدام في أي مكان دون الخوف من نقص التبعيات.

تفصيل كيفية إدارة الاستيرادات في المكون المستقل

الشفافية وسهولة التتبع:

أكبر ميزة في مصفوفة imports الخاصة بالمكون المستقل هي الشفافية. بمجرد فتح ملف الـ TypeScript الخاص بالمكون، يمكنك فوراً معرفة كل شيء يعتمد عليه هذا المكون للعمل (سواء كانت مكونات أخرى، أنابيب لتنسيق التواريخ، أو مكتبة نماذج). لم تعد بحاجة للتنقل بين ملفات الـ Modules لمحاولة معرفة مصدر كل أداة.

الاستيراد الفردي (Tree-Shaking):

في الإصدارات القديمة، كان المطورون يستوردون CommonModule بالكامل لمجرد استخدام توجيه بسيط مثل *ngIf. في Angular 22.1، الممارسة الأفضل هي استيراد الأداة التي تحتاجها فقط (مثل استيراد كلاس NgIf مباشرة). هذا يقلل من حجم الحزمة النهائية (Bundle Size) بشكل كبير ويسرّع أداء التطبيق.

أمثلة برمجية: استيراد مختلف أنواع التبعيات

المثال الأول: تجميع استيرادات متنوعة داخل مكون واحد

في هذا المثال، نقوم ببناء مكون "نموذج تسجيل" يعتمد على النماذج التفاعلية (Reactive Forms)، ويستخدم أداة NgIf للتحقق من الشروط، بالإضافة إلى مكون مخصص لعرض رسائل الخطأ:

typescript

1	import { Component } from '@angular/core';
2	// 1. استيراد توجيهات أنجولر الفردية
3	import { NgIf } from '@angular/common';
4	// 2. استيراد مكتبة النماذج من أنجولر
5	import { ReactiveFormsModule, FormControl } from '@angular/forms';
6	// 3. استيراد مكون مخصص (تم إنشاؤه سابقاً)
7	import { ErrorMessageComponent } from '../error-message/error-message.component';
8
9	@Component({
10	selector: 'app-registration-form',
11	standalone: true,
12	// إضافة كل التبعيات المستوردة إلى مصفوفة imports ليتمكن القالب من استخدامها
13	imports: [NgIf, ReactiveFormsModule, ErrorMessageComponent],
14	template: `
15	<form>
16	<input type="text" [formControl]="userName" placeholder="أدخل اسمك">
17
18	<!-- استخدام NgIf المدمج -->
19	<div *ngIf="userName.invalid">
20	<!-- استخدام المكون المخصص -->
21	<app-error-message text="الاسم غير صالح!"></app-error-message>
22	</div>
23	</form>
24	`
25	})
26	export class RegistrationFormComponent {
27	userName = new FormControl('');
28	}

نصائح احترافية

—استخدم ميزة "الاستيراد التلقائي" في بيئة التطوير (IDE)!
—لا تقم بكتابة مسارات الاستيراد (Import Paths) يدوياً. إذا كنت تستخدم محررات مثل VS Code مع إضافة Angular Language Service، يمكنك ببساطة كتابة اسم المكون أو التوجيه (مثل <app-header>) مباشرة في ملف الـ HTML الخاص بالمكون المستقل. سيقوم المحرر باكتشافه، وإضافته تلقائياً إلى مصفوفة imports في ملف الـ TypeScript، وكتابة سطر الـ import بالأعلى لتوفير وقتك وجهدك.

الدرس السابق

فهم مزخرف المكون

الدرس التالي

استخدام مكون مستقل بدلاً من NgModules

فئة التبعية

دورها في التطبيق

أمثلة عملية لمصفوفة الاستيرادات

مكونات فرعية

بناء واجهات متداخلة ومترابطة

HeaderComponent و ButtonComponent

أدوات العرض

التحكم في الشروط والتنسيق الفردي

NgIf و NgFor و DatePipe

حزم أنجولر

إدارة النماذج والروابط البرمجية

ReactiveFormsModule و RouterModule

مكتبات جاهزة

تسريع التصميم باستخدام واجهات خارجية

MatButtonModule و MatCardModule

تفصيل كيفية إدارة الاستيرادات في المكون المستقل

الشفافية وسهولة التتبع:

الاستيراد الفردي (Tree-Shaking):

أمثلة برمجية: استيراد مختلف أنواع التبعيات

المثال الأول: تجميع استيرادات متنوعة داخل مكون واحد

typescript

1	import { Component } from '@angular/core';
2	// 1. استيراد توجيهات أنجولر الفردية
3	import { NgIf } from '@angular/common';
4	// 2. استيراد مكتبة النماذج من أنجولر
5	import { ReactiveFormsModule, FormControl } from '@angular/forms';
6	// 3. استيراد مكون مخصص (تم إنشاؤه سابقاً)
7	import { ErrorMessageComponent } from '../error-message/error-message.component';
8
9	@Component({
10	selector: 'app-registration-form',
11	standalone: true,
12	// إضافة كل التبعيات المستوردة إلى مصفوفة imports ليتمكن القالب من استخدامها
13	imports: [NgIf, ReactiveFormsModule, ErrorMessageComponent],
14	template: `
15	<form>
16	<input type="text" [formControl]="userName" placeholder="أدخل اسمك">
17
18	<!-- استخدام NgIf المدمج -->
19	<div *ngIf="userName.invalid">
20	<!-- استخدام المكون المخصص -->
21	<app-error-message text="الاسم غير صالح!"></app-error-message>
22	</div>
23	</form>
24	`
25	})
26	export class RegistrationFormComponent {
27	userName = new FormControl('');
28	}