Angular Academy · درس

المدخلات المطلوبة والمحوّلة

حدّدوا المدخلات المطلوبة وحوّلوا القيم

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

ما بعد المدخلات الأساسية

تدعم المدخلات المعتمدة على Signals ميزتين قويتين: تحديد المدخل على أنه مطلوب وتحويل القيم الواردة قبل تخزينها.

المدخلات المطلوبة

استخدموا input.required() عندما يجب على المكوّن الأب توفير قيمة دائمًا. ولا توجد قيمة افتراضية.

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

export class UserComponent {
  userId = input.required<string>();
}

أهمية المدخلات المطلوبة

إذا لم يُربط مدخل مطلوب، يُبلغ Angular عن خطأ، مما يكشف الأخطاء مبكرًا بدلًا من السماح بمرور قيمة غير معرّفة.

<!-- error: userId is required -->
<app-user></app-user>

<!-- correct -->
<app-user [userId]="id"></app-user>

المدخلات المطلوبة غير فارغة

لأن المدخل المطلوب يجب توفيره، فإن نوعه لا يكون أبدًا undefined، لذا يمكنكم قراءته بأمان من دون التحقق من null.

userId = input.required<string>();
load() {
  return this.api.get(this.userId()); // always a string
}

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

يشغّل الخيار transform دالةً على القيمة الواردة قبل تخزينها، وهو مفيد لفرض النوع أو تحويله.

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

export class ToggleComponent {
  disabled = input(false, { transform: (v: unknown) => !!v });
}

فرض النوع المنطقي

يوفر Angular الدالة booleanAttribute لتحويل القيم ذات نمط السمات إلى قيم منطقية حقيقية، وهي مفيدة للسمات التي يعتمد معناها على وجودها.

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

disabled = input(false, { transform: booleanAttribute });

<!-- both work -->
<app-btn disabled></app-btn>
<app-btn [disabled]="true"></app-btn>

فرض النوع الرقمي

وبالمثل، تحوّل numberAttribute سمةً نصية إلى رقم.

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

count = input(0, { transform: numberAttribute });

<!-- string "5" becomes number 5 -->
<app-counter count="5"></app-counter>

دوال التحويل المخصّصة

يمكنكم كتابة أي تحويل لتوحيد القيم، مثل إزالة المسافات الزائدة من السلاسل.

label = input("", {
  transform: (v: string) => v.trim()
});

أنواع إدخال التحويل وإخراجه

يمكن للتحويل قبول نوع وتخزين نوع آخر. والنوع المقبول هو ما يربطه الأب، أما النوع المخزّن فهو ما تقرؤونه.

// accepts string | number, stores number
size = input(0, {
  transform: (v: string | number) => Number(v)
});

الجمع بين المطلوب والتحويل

يمكنكم الجمع بين required والتحويل عبر تمرير كائن الخيارات إلى input.required().

value = input.required({
  transform: numberAttribute
});

متى تستخدمون كل ميزة

استخدموا required لفرض ربط إلزامي، والتحويلات لفرض نوع البيانات الواردة أو توحيدها، مع الحفاظ على منطق المكوّن نظيفًا ومتسقًا.

تحقق سريع

اختبروا مدى فهمكم للمدخلات المطلوبة والمحوّلة.

مراجعة

استخدموا input.required() للمدخلات الإلزامية (غير القابلة لأن تكون فارغة ومن دون قيمة افتراضية)، واستخدموا الخيار transform، بما في ذلك booleanAttribute وnumberAttribute، لفرض أنواع القيم. ويمكن الجمع بين الميزتين.

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

هل درس «المدخلات المطلوبة والمحوّلة» مجاني؟

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

ماذا ستتعلم في «المدخلات المطلوبة والمحوّلة»؟

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

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

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

كم من الوقت يستغرق درس «المدخلات المطلوبة والمحوّلة»؟

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

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

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

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

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