Angular Academy · درس

استعلامات العرض باستخدام viewChild

استعلموا عن العناصر الابنة على هيئة إشارات

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

الاستعلام عن العرض

تحتاج المكوّنات غالبًا إلى مرجع لعنصر أو لمكوّن فرعي في القالب الخاص بها. يوفر Angular الحديث دالة الاستعلام المعتمدة على الإشارات viewChild().

تعريف viewChild

استدعِ viewChild() باستخدام اسم مرجع قالب أو نوع مكوّن. وتكون النتيجة إشارة.

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

@Component({
  selector: "app-form",
  template: "<input #box>"
})
export class FormComponent {
  box = viewChild<ElementRef>("box");
}

قراءة الاستعلام

كما هو الحال مع جميع الإشارات، اقرأ استعلام العرض باستدعائه. ويُرجع العنصر المطابق أو undefined إلى أن يصبح العرض جاهزًا.

focus() {
  this.box()?.nativeElement.focus();
}

الاستعلام عن مكوّن فرعي

مرّر فئة مكوّن للحصول على مرجع ذي نوع محدد إلى مثيل المكوّن الفرعي.

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

child = viewChild(ChildComponent);

run() {
  this.child()?.doSomething();
}

استعلامات العرض المطلوبة

استخدم viewChild.required() عندما يجب أن يكون العنصر المستعلَم عنه موجودًا. وعندها تصبح الإشارة غير قابلة للقيمة null.

box = viewChild.required<ElementRef>("box");

focus() {
  this.box().nativeElement.focus(); // no optional chaining
}

الاستعلام عن عناصر متعددة

تُرجع viewChildren() إشارة تحتوي على مصفوفة للقراءة فقط تضم جميع العناصر المطابقة.

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

items = viewChildren(ItemComponent);

count() {
  return this.items().length;
}

متى تُحلّ الاستعلامات

تُحلّ استعلامات العرض المعتمدة على الإشارات بعد تهيئة العرض. تضمن قراءة هذه الاستعلامات داخل effect تنفيذ الإجراء بعد توفرها.

constructor() {
  effect(() => {
    const el = this.box();
    if (el) el.nativeElement.focus();
  });
}

viewChild مقابل مصمم ViewChild

تحل الإشارة viewChild() محل مصمم @ViewChild التقليدي، إذ تتكامل مع الإشارات وتتجنب في كثير من الحالات الحاجة إلى إدارة توقيت دورة الحياة يدويًا.

// classic:
@ViewChild("box") box!: ElementRef;

// modern:
box = viewChild<ElementRef>("box");

قراءة رمز مميز محدد

يتيح لك الخيار read الاستعلام عن رمز مميز مختلف من العنصر المطابق، مثل توجيه أو ElementRef.

tooltip = viewChild("trigger", { read: TooltipDirective });

contentChild للمحتوى المُسقَط

للمحتوى المُسقَط بدلًا من عرض المكوّن نفسه، استخدم استعلامي contentChild() وcontentChildren() الموازيين.

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

header = contentChild(HeaderComponent);

اختيار الاستعلام المناسب

استخدم استعلامات العرض للقالب الخاص بك، واستعلامات المحتوى للمحتوى المُسقَط؛ واختر الصيغة المطلوبة عندما يجب أن يكون الهدف موجودًا، والصيغة الجمع للمجموعات.

تحقق سريع

اختبر مدى فهمك لاستعلامات العرض المعتمدة على الإشارات.

مراجعة

تستعلم الإشارة viewChild() عن العناصر والمكوّنات الفرعية في عرض المكوّن؛ استخدم viewChild.required() للأهداف المضمونة، وviewChildren() للمجموعات، والخيار read للرموز المميزة المحددة، وcontentChild() للمحتوى المُسقَط.

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

هل درس «استعلامات العرض باستخدام viewChild» مجاني؟

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

ماذا ستتعلم في «استعلامات العرض باستخدام viewChild»؟

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

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

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

كم من الوقت يستغرق درس «استعلامات العرض باستخدام viewChild»؟

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

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

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

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

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