فهم مكوّنات Angular

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

ما هو المكوّن؟

المكوّن هو جزء من واجهة المستخدم يتضمن كود HTML وCSS وTypeScript. ويمثّل جزءًا من واجهة المستخدم الخاصة بتطبيقكم.

إنشاء مكوّن

استخدموا Angular CLI لإنشاء مكوّن بسهولة:

ng generate component my-component

ng generate component my-component

بنية المكوّن

يتكوّن مكوّن Angular عادةً من أربعة ملفات رئيسية:

• .html: القالب
• .ts: المنطق
• .css: الأنماط
• .spec.ts: الاختبارات

مُزخرف المكوّن

يربط مُزخرف @Component فئة المكوّن بالقالب والأنماط الخاصة بها.

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.html',
  styleUrls: ['./my-component.css']
})

خطافات دورة الحياة

تحتوي مكوّنات Angular على خطافات لدورة الحياة تتيح لكم تشغيل الكود في نقاط زمنية محددة. ومن الخطافات الشائعة ngOnInit() وngOnDestroy().

استخدام ngOnInit()

يُشغَّل ngOnInit() بعد أن يهيّئ Angular بيانات المكوّن. وهو مناسب جدًا للإعداد الأولي:

ngOnInit() {
  console.log('Component initialized!');
}

عرض المكوّنات

استخدموا محدِّد المكوّن في قوالب أخرى لعرضه:

<app-my-component></app-my-component>

الملخص

لقد تعلّمتم المكوّنات وكيفية إنشائها وخطافات دورة حياتها. أحسنتم العمل!