Angular Academy · درس

مدخلات الإشارات باستخدام input()

صرّحوا عن مدخلات تفاعلية على هيئة إشارات

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

المدخلات المعتمدة على Signal

يوفر Angular الحديث الدالة input() لتعريف مدخلات المكوّن بوصفها Signals، لتحل محل المُزيّن التقليدي @Input ببديل تفاعلي.

تعريف مدخل يعتمد على Signal

استدعوا input() مع قيمة افتراضية اختيارية. والنتيجة هي signal للقراءة فقط.

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

@Component({ selector: "app-greet", template: "" })
export class GreetComponent {
  name = input("World");
}

قراءة المدخل

تُقرأ المدخلات المعتمدة على signal باستدعائها كما لو كانت دالة، سواء في الشيفرة أو القوالب.

@Component({
  selector: "app-greet",
  template: "<p>Hello, {{ name() }}</p>"
})
export class GreetComponent {
  name = input("World");
}

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

يربط المكوّن الأب بالمدخل المعتمد على signal بالطريقة نفسها التي يربط بها مدخلًا تقليديًا، باستخدام ربط الخاصية.

<app-greet [name]="userName"></app-greet>

// parent
userName = "Ada";

المدخلات للقراءة فقط

يكون input() العادي للقراءة فقط داخل المكوّن. لا يمكنكم استدعاء set عليه؛ فالأب وحده يغيّر قيمته.

// this is NOT allowed:
// this.name.set("x");
// inputs are read-only signals

تحديد نوع المدخلات

وفّروا نوعًا عامًا لضمان سلامة الأنواع، وخصوصًا عند عدم وجود قيمة افتراضية يمكن استنتاج النوع منها.

age = input<number>();
label = input<string>("Untitled");

المدخلات في القيم المحسوبة

بما أن المدخلات Signals، فإنها تتكامل مع computed لإنشاء حالة مشتقة تُحدّث تلقائيًا.

import { input, computed } from "@angular/core";

first = input("");
last = input("");
fullName = computed(() => this.first() + " " + this.last());

المدخلات مع effect

يمكنكم الاستجابة لتغيّرات المدخلات باستخدام effect، الذي يُعاد تشغيله كلما تغيّر signal تمت قراءته.

constructor() {
  effect(() => {
    console.log("name is", this.name());
  });
}

لا حاجة إلى ngOnChanges

مع المدخلات المعتمدة على Signals، لن تعودوا غالبًا بحاجة إلى ngOnChanges؛ إذ يستجيب computed وeffect للتغييرات نيابةً عنكم.

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

يمكنكم إتاحة اسم ربط عام مختلف باستخدام الخيار alias.

value = input(0, { alias: "count" });

<!-- parent binds with the alias -->
<app-counter [count]="total"></app-counter>

لماذا نستخدم المدخلات المعتمدة على Signals

تتميز المدخلات المعتمدة على Signals بالتفاعلية وسلامة الأنواع، كما تتكامل بسلاسة مع computed وeffect، مما يقلل الشيفرة المتكررة مقارنةً بنهج المُزيّن ودورة الحياة.

تحقق سريع

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

مراجعة

تعرّف الدالة input() مدخلات تفاعلية معتمدة على Signals وتكون للقراءة فقط. اقرأوها باستدعائها، وحددوا أنواعها باستخدام الأنواع العامة، واستخدموا أسماء مستعارة لها عند الحاجة، واجمعوها مع computed وeffect بدلًا من ngOnChanges.

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

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

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

ماذا ستتعلم في «مدخلات الإشارات باستخدام input()»؟

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

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

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

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

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

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

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

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

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