Angular Academy · درس

خصائص مخصّصة قابلة للربط ثنائي الاتجاه

أتِيحوا مدخلاتكم الخاصة للربط ثنائي الاتجاه

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

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

يمكنك جعل أي خاصية في المكوّن قابلة للربط ثنائي الاتجاه. ويدعم Angular أسلوبين: زوج @Input و@Output التقليدي، أو الإشارة الحديثة model().

اتفاقية التسمية

لكي يعمل الربط ثنائي الاتجاه، يجب أن يكون اسم الإخراج هو اسم الإدخال مضافًا إليه اللاحقة Change. فمثلًا، يحتاج الإدخال size إلى الإخراج sizeChange.

تعريف الإدخال

ابدأ بإدخال عادي يمكن للمكوّن الأب تعيينه.

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

export class RatingComponent {
  @Input() value = 0;
}

تعريف الإخراج المطابق

أضف EventEmitter من نوع @Output وسمّه باستخدام اللاحقة Change.

import { Input, Output, EventEmitter } from "@angular/core";

export class RatingComponent {
  @Input() value = 0;
  @Output() valueChange = new EventEmitter<number>();
}

الإصدار عند التحديث

عندما يغيّر المكوّن القيمة داخليًا، حدّث الخاصية وأصدر القيمة الجديدة حتى يبقى المكوّن الأب متزامنًا.

setValue(v: number) {
  this.value = v;
  this.valueChange.emit(v);
}

الربط من المكوّن الأب

يمكن للمكوّن الأب الآن استخدام صيغة الموزة داخل الصندوق مع خاصيتك المخصصة.

<app-rating [(value)]="score"></app-rating>

// parent
score = 3;

مثال كامل على الإدخال/الإخراج

إليك مكوّنًا مخصصًا كاملًا قابلًا للربط ثنائي الاتجاه باستخدام الواجهة البرمجية التقليدية.

@Component({
  selector: "app-rating",
  template: "<button (click)='bump()'>{{ value }}</button>"
})
export class RatingComponent {
  @Input() value = 0;
  @Output() valueChange = new EventEmitter<number>();
  bump() {
    this.value++;
    this.valueChange.emit(this.value);
  }
}

أسلوب model الحديث

يمكن تنفيذ السلوك نفسه بشيفرة أقصر بكثير باستخدام model()، التي تنشئ زوج الإدخال والإخراج نيابةً عنك.

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

@Component({
  selector: "app-rating",
  template: "<button (click)='bump()'>{{ value() }}</button>"
})
export class RatingComponent {
  value = model(0);
  bump() { this.value.update(v => v + 1); }
}

مقارنة الأسلوبين

الزوج التقليدي صريح ويعمل في كل مكان، أما model() فموجز وقائم على الإشارات. ويعرض كلاهما الربط [(value)] نفسه للمكوّنات الأب.

خصائص متعددة للربط ثنائي الاتجاه

يمكن للمكوّن عرض عدة خصائص قابلة للربط ثنائي الاتجاه، على أن تتبع كل منها اتفاقية input/inputChange.

@Input() min = 0;
@Output() minChange = new EventEmitter<number>();
@Input() max = 100;
@Output() maxChange = new EventEmitter<number>();

اختيار الأسلوب

في الشيفرة الجديدة، فضّل model() لاختصاره وتكامله مع الإشارات. استخدم زوج الإدخال/الإخراج الصريح عندما تحتاج إلى تحكم دقيق أو لا تستخدم الإشارات.

تحقّق سريع

اختبر مدى فهمك للخصائص المخصصة القابلة للربط ثنائي الاتجاه.

مراجعة

يتطلب الربط ثنائي الاتجاه المخصص إدخالًا وإخراجًا اسمه inputChange، مع إصدار القيمة عند كل تحديث. وتنشئ الإشارة الحديثة model() هذا الزوج تلقائيًا، وهي الخيار الموجز للشيفرة الجديدة.

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

هل درس «خصائص مخصّصة قابلة للربط ثنائي الاتجاه» مجاني؟

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

ماذا ستتعلم في «خصائص مخصّصة قابلة للربط ثنائي الاتجاه»؟

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

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

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

كم من الوقت يستغرق درس «خصائص مخصّصة قابلة للربط ثنائي الاتجاه»؟

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

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

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

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

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