Angular Academy · درس

خطافا AfterView وAfterContent

شغّلوا المنطق بعد تهيئة العرض والمحتوى

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

العرض في مقابل المحتوى

يميّز Angular بين العرض الخاص بالمكوّن (القالب الخاص به) والمحتوى المُسقَط فيه عبر ng-content. وتُستدعى hooks منفصلة لكل منهما.

AfterViewInit

تُنفَّذ hook ‏AfterViewInit مرة واحدة بعد تهيئة عرض المكوّن وعروض العناصر التابعة له بالكامل. وهذا هو الوقت المناسب للوصول إلى العناصر التابعة في العرض.

import { AfterViewInit } from "@angular/core";

export class DemoComponent implements AfterViewInit {
  ngAfterViewInit(): void {
    console.log("view ready");
  }
}

الوصول إلى ViewChild

يصبح المرجع @ViewChild إلى عنصر في القالب متاحًا بصورة موثوقة في ngAfterViewInit، وليس قبل ذلك.

@ViewChild("input") input!: ElementRef;

ngAfterViewInit() {
  this.input.nativeElement.focus();
}

AfterViewChecked

تُنفَّذ hook ‏AfterViewChecked بعد كل عملية فحص لعرض المكوّن. وتُستدعى كثيرًا، لذا احرص على أن يكون عملها محدودًا.

ngAfterViewChecked() {
  // runs after each view check
}

AfterContentInit

تُنفَّذ hook ‏AfterContentInit مرة واحدة بعد تهيئة المحتوى المُسقَط باستخدام ng-content.

import { AfterContentInit } from "@angular/core";

export class CardComponent implements AfterContentInit {
  ngAfterContentInit() {
    console.log("projected content ready");
  }
}

الوصول إلى ContentChild

استخدم @ContentChild للاستعلام عن المحتوى المُسقَط. ويصبح المرجع متاحًا في ngAfterContentInit.

@ContentChild(HeaderComponent) header!: HeaderComponent;

ngAfterContentInit() {
  console.log(this.header);
}

AfterContentChecked

تُنفَّذ hook ‏AfterContentChecked بعد كل عملية فحص للمحتوى المُسقَط. وكما في hook فحص العرض، تُستدعى كثيرًا.

الترتيب الكامل لـ hooks

بالنسبة إلى مكوّن له مدخلات ومحتوى، يكون الترتيب: ngOnChanges، ثم ngOnInit، ثم ngDoCheck، ثم ngAfterContentInit، ثم ngAfterContentChecked، ثم ngAfterViewInit، ثم ngAfterViewChecked.

// init sequence:
// OnChanges -> OnInit -> DoCheck
// -> AfterContentInit -> AfterContentChecked
// -> AfterViewInit -> AfterViewChecked

خطأ ExpressionChangedAfterChecked

قد يؤدي تغيير البيانات المرتبطة داخل ngAfterViewInit إلى ظهور الخطأ الشهير ExpressionChangedAfterItHasBeenCheckedError. أجّل هذه التحديثات لتجنّب الخطأ.

ngAfterViewInit() {
  // defer to next tick to avoid the error
  setTimeout(() => this.ready = true);
}

استخدام ViewChildren

يعيد @ViewChildren كائن QueryList يحتوي على عدة عناصر أو مكوّنات مطابقة، ويصبح جاهزًا في ngAfterViewInit.

@ViewChildren(ItemComponent) items!: QueryList<ItemComponent>;

ngAfterViewInit() {
  console.log(this.items.length);
}

اختيار الـ hook المناسبة

استخدم hooks ‏AfterView مع قالبك الخاص، وhooks ‏AfterContent مع المحتوى المُسقَط. فضّل صيغ Init للإعداد الذي يُنفَّذ مرة واحدة، ولا تستخدم صيغ Checked إلا عند الحاجة.

تحقّق سريع

اختبر مدى فهمك لـ hooks ما بعد العرض وما بعد المحتوى.

مراجعة

تُستدعى hooks ‏AfterContent للمحتوى المُسقَط، بينما تُستدعى hooks ‏AfterView لعرض المكوّن نفسه. تُنفَّذ صيغ Init مرة واحدة، أما صيغ Checked فتُنفَّذ في كل دورة. استخدمها للوصول إلى @ViewChild و@ContentChild بأمان.

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

هل درس «خطافا AfterView وAfterContent» مجاني؟

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

ماذا ستتعلم في «خطافا AfterView وAfterContent»؟

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

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

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

كم من الوقت يستغرق درس «خطافا AfterView وAfterContent»؟

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

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

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

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

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