Angular Academy · درس

‏ngOnInit والتهيئة

شغّلوا منطق الإعداد عند بدء المكوّن

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

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

للمكوّنات في Angular دورة حياة يديرها إطار العمل، وتشمل الإنشاء واكتشاف التغييرات والعرض والإتلاف. وتتيح لك خطافات دورة الحياة تشغيل التعليمات البرمجية في لحظات محددة.

التعرّف على OnInit

تُشغَّل خطاف OnInit مرة واحدة، بعد أن تضبط Angular مدخلات المكوّن وتعرض العرض الأولي. وهو المكان المعتاد لمنطق التهيئة.

تطبيق OnInit

طبّق الواجهة OnInit وأضف الأسلوب ngOnInit. وستستدعيه Angular تلقائيًا.

import { Component, OnInit } from "@angular/core";

@Component({ selector: "app-demo", template: "" })
export class DemoComponent implements OnInit {
  ngOnInit(): void {
    console.log("Component initialized");
  }
}

المنشئ مقابل ngOnInit

يُشغَّل المنشئ أولًا، قبل ضبط المدخلات، وينبغي أن يقتصر على حقن التبعيات البسيط. استخدم ngOnInit للإعداد الفعلي بعد توفر المدخلات.

constructor(private http: HttpClient) {
  // inputs NOT ready yet
}

ngOnInit() {
  // inputs ARE ready here
}

تكون المدخلات جاهزة في ngOnInit

عند تشغيل ngOnInit، تكون جميع خصائص @Input قد تلقت قيمها الأولية المرتبطة من المكوّن الأب.

@Input() userId!: string;

ngOnInit() {
  console.log(this.userId); // available
}

جلب البيانات في ngOnInit

من الأنماط الشائعة تحميل البيانات من خدمة داخل ngOnInit، إذ تكون المدخلات والتبعيات متاحة حينها.

ngOnInit() {
  this.userService.getUser(this.userId)
    .subscribe(u => this.user = u);
}

يُشغَّل ngOnInit مرة واحدة

بخلاف خطافات اكتشاف التغييرات، يُشغَّل ngOnInit مرة واحدة بالضبط طوال دورة حياة المكوّن، مباشرة بعد أول ngOnChanges.

ترتيبه بالنسبة إلى ngOnChanges

إذا كان للمكوّن مدخلات، تُشغَّل ngOnChanges أولًا بالقيم الأولية، ثم يُشغَّل ngOnInit. وحتى من دون مدخلات، يظل ngOnInit يُشغَّل.

// sequence with inputs:
// 1. constructor
// 2. ngOnChanges (first)
// 3. ngOnInit

تهيئة النماذج

يُعد إنشاء النماذج التفاعلية مهمة كلاسيكية لـ ngOnInit، لأنك قد تحتاج إلى خدمات محقونة لإعداد النموذج.

form!: FormGroup;

ngOnInit() {
  this.form = this.fb.group({
    name: [""],
    email: [""]
  });
}

أبقِ المنشئات بسيطة

تجنب تنفيذ أعمال ثقيلة في المنشئ. فهو يُشغَّل قبل أن تصل Angular المدخلات، كما أن التأثيرات الجانبية فيه تجعل اختبار المكوّنات والتنبؤ بسلوكها أكثر صعوبة.

التهيئة غير المتزامنة

يمكنك استدعاء منطق غير متزامن من ngOnInit، لكن الأسلوب نفسه يعيد void؛ لذا استخدم الاشتراك أو أنماطًا غير متزامنة داخله.

ngOnInit() {
  this.loadAsync();
}

private async loadAsync() {
  this.data = await firstValueFrom(this.api.get());
}

تحقق سريع

اختبر مدى فهمك لـ OnInit.

مراجعة

تُشغَّل خطاف OnInit مع ngOnInit مرة واحدة بعد ربط المدخلات، وهي مثالية لجلب البيانات وإعداد النماذج. أبقِ المنشئ بسيطًا، واقصر التهيئة على ngOnInit.

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

هل درس «‏ngOnInit والتهيئة» مجاني؟

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

ماذا ستتعلم في «‏ngOnInit والتهيئة»؟

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

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

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

كم من الوقت يستغرق درس «‏ngOnInit والتهيئة»؟

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

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

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

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

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