شرح دورة حياة المكونات الزاويّة وطرقها المختلفة

تم إطلاق Angular في عام 2009 بواسطة Google ، وهو إطار عمل لتطوير JavaScript بلغة برمجة Typescript. إنه أحد أكثر أطر التصميم شيوعًا لتطوير التطبيقات. أفضل جزء في Angular framework هو أنه تطبيق مفتوح المصدر. يستخدم المطورون إطار العمل Angular لإنشاء تطبيقات الجوال والويب وتصور البيانات. لتطوير Angular ، يتعين على المطورين اتباع عملية شاملة تسمى دورة حياة Angular.

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

ما هي دورة الحياة الزاويّة؟

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

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

تعمل خطافات دورة حياة المكون الزاوي المختلفة كوظائف في إطار العمل الزاوي. تسمح كل طريقة ربط للمطورين بتشغيل أكواد مختلفة أثناء حدث معين.

تعلم دورات تطوير البرمجيات عبر الإنترنت من أفضل الجامعات في العالم. اربح برامج PG التنفيذية أو برامج الشهادات المتقدمة أو برامج الماجستير لتتبع حياتك المهنية بشكل سريع.

دورة حياة المكونات الزاويّة

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

دعونا نفهم المراحل المختلفة لدورة الحياة الزاوية:

• ngOnChanges: - يحدث حدث ngOnChanges () عندما نغير قيمة عنصر تحكم الإدخال داخل المكون ، وتتغير الخاصية المرتبطة للمكون. بعبارات بسيطة ، تحدث طريقة الخطاف هذه عندما تقوم Angular بتعيين أو إعادة تعيين الخصائص المرتبطة للمكون. أثناء هذه الطريقة ، يتم استلام كائن "SimpleCharge" لقيم الخصائص الحالية والسابقة.
  تستقبل طريقة الخطاف هذه خريطة بيانات معدلة لقيم الخصائص الحالية والسابقة. يتم تغليف مخطط البيانات كـ SimpleCharge. من المهم أن نتذكر أن هذا الحدث يحدث في كثير من الأحيان. لذلك ، يجب أن تكون حذرًا للغاية أثناء إجراء أي تغييرات أثناء الحدث لأنها يمكن أن تؤثر بشكل كبير على الأداء. يجب عليك استخدام طريقة الخطاف هذه فقط إذا كان للمكون مدخلات مرتبطة وقمت بتغيير الخصائص المرتبطة للمكون. لذلك ، يتم التعامل معها عادةً على أنها طريقة معاودة الاتصال.
• ngOnInit: - يستخدم هذا الحدث لتهيئة البيانات في أحد المكونات. يقوم ngOnInit () بتهيئة المكون أو التوجيه بمجرد عرض الخصائص المرتبطة بالبيانات بواسطة Angular ويتم تعيين خصائص الإدخال بواسطة المكون. الغرض الأساسي من ngOnInit () هو إجراء عمليات تهيئة معقدة. تستخدم طريقة الخطاف أولاً المكون لتوليد البيانات الأولية أو المتغيرات المحلية إلى قيم بسيطة. ثم يتم استخدامه لإعداد المكون بمجرد أن يحدد Angular خصائص الإدخال. عادةً ما يتم استدعاء الحدث ngOnInit () بعد ngOnChanges إذا كان للمكون خصائص مرتبطة. ومع ذلك ، إذا كان المكون لا يحتوي على أي خصائص مرتبطة ، فيمكننا تنفيذ الحدث ngOnInit () مباشرة. يجب أن تتذكر أيضًا أن هذا الخطاف يسمى مرة واحدة فقط.
• ngDoCheck: - يحدث هذا الخطاف في كل مرة نتحقق فيها من خصائص طريقة الإدخال. يعد حدث ngDoCheck جزءًا لا يتجزأ من كل دورة اكتشاف تغيير ويمكن استخدامه مع التحقق المنطقي الخاص بك. يسهل هذا الحدث اكتشاف التغييرات أو الخوارزميات المخصصة في المكون. تسمح طريقة دفتر الشيكات ngDoCheck باكتشاف تلك التغييرات التي لا يستطيع Angular اكتشافها. يمكنك استدعاء ngDoCheck بعد ngOnChanges لكل عملية اكتشاف تغيير. يمكن تشغيله بعد ngOnInit في التشغيل الأول ، حتى إذا لم يتم إجراء أي تغييرات على الخصائص المرتبطة للمكون.
  
• ngAfterContentInit: - تشبه مرحلة الخطاف أو طريقة دورة الحياة طريقة ngOnInit لأنها تحدث مرة واحدة فقط خلال عمر المكون. يمكنك تشغيل هذا الحدث مرة واحدة عندما يتعين عليك التحقق من روابط المكون لأول مرة. نقوم بتنفيذ هذا الحدث بعد أن ينفذ Angular أي نشاط لإسقاط المحتوى داخل المكون. بكلمات بسيطة ، يتم تنفيذ ngAfterContentInit عندما يكون هناك إسقاط لمحتوى خارجي بواسطة Angular في عرض المكون أو العرض الذي يوجد فيه التوجيه. يتم استدعاء ngAfterContentInit Angular مباشرة بعد تنفيذ الأسلوب ngDoCheck. يرتبط أسلوب دورة الحياة هذا بتهيئة المكون الفرعي.
  
• ngAfterContentChecked: - مرحلة الخطاف هذه هي إجراء لاحق لطريقة ngDoCheck. كما يوحي الاسم ، يتم تنفيذ طريقة ngAfterContentChecked بعد أن يكتشف Angular التغييرات في المحتوى الخارجي المتوقع داخل المكون. يقع هذا الحدث بعد كل دورة الكشف عن التغيير. يتم استدعاؤه بعد ngAfterContentInit () وكل ngDoCheck () اللاحقة. مثل ngAfterContentInit ، يرتبط ngAfterContentChecked أيضًا بتهيئة المكون الفرعي.
  
• ngAfterViewInit: - يتم تشغيل ngAfterViewInit بعد اكتمال تهيئة عرض المكون. يتم استدعاؤه مرة واحدة فقط بعد أسلوب دورة حياة ngAfterContentChecked (). تستخدم طريقة الخطاف هذه فقط للمكونات وليس للمكونات الفرعية.
  

  الدورات والمقالات الشعبية في هندسة البرمجيات

  البرامج الشعبية
  برنامج PG التنفيذي في تطوير البرمجيات - IIIT ب	برنامج شهادة Blockchain - PURDUE	برنامج شهادة الأمن السيبراني - PURDUE	ماجستير في علوم الكمبيوتر - IIIT ب
  مقالات شعبية أخرى
  راتب Cloud Engineer في الولايات المتحدة 2021-22	راتب AWS Solution Architect في الولايات المتحدة	راتب المطور الخلفي في الولايات المتحدة	راتب المطور الأمامي في الولايات المتحدة
  راتب مطور الويب في الولايات المتحدة الأمريكية	أسئلة مقابلة Scrum Master في عام 2022	كيف تبدأ مهنة في الأمن السيبراني في عام 2022؟	الخيارات المهنية في الولايات المتحدة لطلاب الهندسة

• ngAfterViewChecked: - يتم استدعاء دورة الحياة هذه بمجرد انتهاء Angular من الكشف أو التحقق من عرض المكون أو المكون الفرعي. على الرغم من استدعاء طريقة ngAfterViewChecked بعد طريقة ngAfterViewInit ، يتم تنفيذها بعد كل مرحلة لاحقة من مراحل دورة حياة ngAfterContentChecked (). طريقة الخطاف هذه مرتبطة فقط بالمكونات الزاويّة .
  
• ngOnDestroy: - يتم تنفيذ طريقة الخطاف ngOnDestroy () قبل أن تدمر Angular المكونات التي لم تعد مطلوبة. تفصل طريقة دورة الحياة هذه الأحداث وتساعد على تجنب أي تسرب للذاكرة. كما أنه يلغي الاشتراكات التي يمكن ملاحظتها. نسمي هذا الحدث مرة واحدة فقط قبل إزالة المكون. تعمل طريقة الخطاف هذه كتنظيف قبل أن يدمر Angular المكون.

واجهات في دورة الحياة الزاوية

عادة ما يتم تحديد دورات الحياة الزاوية من خلال فئة المكون. ومع ذلك ، يمكن أيضًا استخدام الواجهات لتحديد فئة مكون Angular حيث أن طرق الخطاف المختلفة لها بالفعل واجهة Typecript مرتبطة. عادة ما نفهم الواجهة على أنها خاصية تساعد في تحديد الطرق المختلفة والخصائص ذات الصلة. على الرغم من أنه غير ضروري ، يوصى بشدة بتنفيذ واجهات في دورة حياة Angular. الغرض من كل واجهة هو تحديد النموذج الأولي لطرق الخطاف. تتم تسمية الواجهات بالبادئة "ng".

استنتاج

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

إذا كنت تخطط لممارسة مهنة في تطوير تطبيق Angular ، فيجب أن يكون لديك معرفة متعمقة بالعملية بأكملها ووظائف طرق الخطاف المختلفة. علاوة على ذلك ، نظرًا لأن Angular هو إطار عمل لتطوير جافا سكريبت ، يجب أن تتعلم لغة برمجة Java. يعد برنامج PG التنفيذي التابع لشركة upGrad في مجال تطوير البرامج خيارًا ممتازًا للتعرف على تطوير تطبيق Angular من البداية.