Angular Academy · درس

المخرجات باستخدام output()

أصدروا الأحداث باستخدام API‏ output الجديد

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

المخرجات في عصر Signals

إلى جانب المدخلات المعتمدة على Signals، يوفر Angular الحديث الدالة output() لتعريف أحداث المكوّن، لتحل محل @Output التقليدي مع EventEmitter.

تعريف مخرج

استدعوا output() لإنشاء حدث يمكن للمكوّن إصداره. وفّروا نوعًا عامًا للبيانات المرسلة.

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

@Component({ selector: "app-counter", template: "" })
export class CounterComponent {
  changed = output<number>();
}

إصدار حدث

استدعوا emit على المخرج لإرسال قيمة إلى المستمعين.

export class CounterComponent {
  changed = output<number>();
  count = 0;
  inc() {
    this.count++;
    this.changed.emit(this.count);
  }
}

الاستماع من المكوّن الأب

يشترك المكوّن الأب باستخدام ربط الأحداث، مع استخدام $event للبيانات المرسلة.

<app-counter (changed)="onChange($event)"></app-counter>

// parent
onChange(value: number) {
  this.total = value;
}

مخرجات من دون بيانات مرسلة

للأحداث التي لا تحمل بيانات، استخدموا output<void>() وأصدروا الحدث من دون وسيطة.

closed = output<void>();

close() {
  this.closed.emit();
}

output مقارنةً بـ EventEmitter

واجهة API ‏output() أبسط وليست مرتبطة بـ RxJS. لا تنشئوا مثيلًا من EventEmitter؛ فالدالة تتولى ذلك نيابةً عنكم.

// classic:
@Output() changed = new EventEmitter<number>();

// modern:
changed = output<number>();

تسمية مستعارة لمخرج

أتِيحوا اسم حدث عام مختلفًا باستخدام الخيار alias.

valueChange = output<number>({ alias: "change" });

<!-- parent listens with the alias -->
<app-counter (change)="onChange($event)"></app-counter>

المخرجات والربط ثنائي الاتجاه

يؤدي اقتران input مع output يُسمى xChange إلى تفعيل الربط ثنائي الاتجاه، مع أن model() ينجز ذلك بإيجاز أكبر.

value = input(0);
valueChange = output<number>();
// enables [(value)] on the parent

اشتقاق المخرجات من Observables

يحوّل مساعد التوافق outputFromObservable عنصر Observable إلى مخرج، مما يربط تدفقات RxJS بواجهة API الجديدة.

import { outputFromObservable } from "@angular/core/rxjs-interop";

clicks = outputFromObservable(this.clicks$);

سلامة الأنواع

بما أن المخرجات محددة الأنواع، يُتحقق من نوع معامل المعالج في المكوّن الأب بمقارنته بنوع البيانات المرسلة، مما يكشف حالات عدم التطابق وقت الترجمة.

selected = output<{ id: number }>();

<!-- parent must accept { id: number } -->
<app-list (selected)="pick($event)"></app-list>

متى تستخدمون output

فضّلوا output() في المكوّنات الجديدة: فهو أخف، وآمن من ناحية الأنواع، ويتكامل طبيعيًا مع المدخلات المعتمدة على Signals لنمذجة التواصل بين المكوّنات.

تحقق سريع

اختبروا مدى فهمكم لدالة output.

مراجعة

تعرّف الدالة output() أحداثًا محددة الأنواع من دون EventEmitter. أصدروا الأحداث باستخدام emit()، واستمعوا إليها عبر ربط الأحداث و$event، واستخدموا أسماء مستعارة عند الحاجة، واجمعوها مع المدخلات المعتمدة على Signals لتواصل واضح بين المكوّنات.

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

هل درس «المخرجات باستخدام output()» مجاني؟

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

ماذا ستتعلم في «المخرجات باستخدام output()»؟

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

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

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

كم من الوقت يستغرق درس «المخرجات باستخدام output()»؟

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

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

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

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

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