Angular Academy · درس

‏ngOnChanges وتغييرات Input

استجيبوا للتغييرات في خصائص الإدخال

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

الاستجابة لتغيّرات المدخلات

تتيح خطاف OnChanges للمكوّن الاستجابة كلما تغيّرت خصائص @Input فيه. وتستدعي Angular ‏ngOnChanges قبل ngOnInit وعند كل تحديث للمدخلات.

تطبيق OnChanges

طبّق الواجهة OnChanges وأضف أسلوب ngOnChanges الذي يتلقى كائنًا من النوع SimpleChanges.

import { Component, Input, OnChanges, SimpleChanges } from "@angular/core";

@Component({ selector: "app-demo", template: "" })
export class DemoComponent implements OnChanges {
  @Input() count = 0;
  ngOnChanges(changes: SimpleChanges): void {
    console.log(changes);
  }
}

كائن SimpleChanges

يمثل SimpleChanges خريطة مفاتيحها أسماء المدخلات. وكل إدخال فيها هو SimpleChange ويحتوي على currentValue وpreviousValue وfirstChange.

ngOnChanges(changes: SimpleChanges) {
  const c = changes["count"];
  if (c) {
    console.log(c.previousValue, "->", c.currentValue);
  }
}

اكتشاف التغيير الأول

تكون راية firstChange مساوية لـ true عند تعيين المدخل للمرة الأولى. استخدمها للتمييز بين التهيئة والتحديثات اللاحقة.

ngOnChanges(changes: SimpleChanges) {
  if (changes["count"]?.firstChange) {
    console.log("initial value");
  } else {
    console.log("updated value");
  }
}

الاستجابة لمدخل محدد

تحقق دائمًا من وجود المفتاح قبل قراءته، إذ لا تتغير كل المدخلات في كل دورة.

ngOnChanges(changes: SimpleChanges) {
  if ("userId" in changes) {
    this.reload(this.userId);
  }
}

الاكتشاف القائم على المرجع

تُشغَّل ngOnChanges عند تغيّر المرجع للكائنات والمصفوفات. ولا يؤدي تعديل كائن مُمرَّر كمدخل إلى تشغيلها.

// will NOT trigger ngOnChanges in parent-bound child:
this.config.theme = "dark";

// will trigger it:
this.config = { ...this.config, theme: "dark" };

الترتيب مع ngOnInit

عند الإنشاء، تُشغَّل ngOnChanges أولًا، مع المدخلات الأولية، ثم يُشغَّل ngOnInit. بعد ذلك، تُشغَّل ngOnChanges مجددًا كلما تغيّرت المدخلات.

مقارنة القيم القديمة والجديدة

من الاستخدامات الشائعة الاستجابة فقط عندما تختلف قيمة فعلًا، مثل إعادة تحميل البيانات عند تغيّر مدخل يمثّل معرّفًا.

ngOnChanges(changes: SimpleChanges) {
  const id = changes["userId"];
  if (id && id.currentValue !== id.previousValue) {
    this.fetchUser(id.currentValue);
  }
}

تحديد الأنواع لأجل الأمان

يمكنك قراءة القيم من changes أو مباشرةً من خاصية المكوّن؛ فبعد ngOnChanges تكون الخاصية قد احتوت بالفعل على القيمة الحالية.

ngOnChanges() {
  // this.count already updated here
  this.total = this.count * 2;
}

متى لا تستخدم OnChanges؟

بالنسبة إلى الحالة المشتقة من مدخل واحد، قد يكون استخدام getter أو قيمة محسوبة أوضح. اترك ngOnChanges للتأثيرات الجانبية التي يجب تشغيلها عند تحديث المدخلات.

عدة مدخلات في آن واحد

إذا تغيّرت عدة مدخلات في الدورة نفسها، يُستدعى ngOnChanges مرة واحدة، مع وجودها جميعًا في خريطة SimpleChanges.

ngOnChanges(changes: SimpleChanges) {
  // both keys may be present
  if (changes["min"] || changes["max"]) {
    this.validateRange();
  }
}

تحقق سريع

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

مراجعة

تستجيب خطاف OnChanges لتغيّرات المدخلات عبر خريطة SimpleChanges التي تحتوي على currentValue وpreviousValue وfirstChange. وتُشغَّل عند تغيّر المراجع، لذا استخدم تحديثات غير قابلة للتغيير.

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

هل درس «‏ngOnChanges وتغييرات Input» مجاني؟

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

ماذا ستتعلم في «‏ngOnChanges وتغييرات Input»؟

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

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

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

كم من الوقت يستغرق درس «‏ngOnChanges وتغييرات Input»؟

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

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

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

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

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