Angular Academy · درس

الإشارات في القوالب

اربطوا قيم الإشارات مباشرةً في قوالب المكوّنات

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

Signals في القوالب

من أفضل مزايا signals أنك تقرؤها مباشرةً في القوالب باستدعائها، تمامًا كما في TypeScript. لا حاجة إلى async pipe.

القراءة داخل Interpolation

في القالب، استدعِ signal داخل interpolation ذات القوسين المعقوفين المزدوجين لعرض قيمتها.

@Component({
  selector: 'app-counter',
  template: '<p>Count: {{ count() }}</p>'
})
export class CounterComponent {
  count = signal(0);
}

لا حاجة إلى Async Pipe

مع Observables، كنت تحتاج إلى async pipe لإجراء الاشتراك وإلغائه. أما signals فهي متزامنة، لذا تكتفي باستدعائها، ولا يوجد ما يلزم إلغاء الاشتراك فيه.

تحديثات تلقائية للواجهة

عندما تتغير signal مقروءة في القالب، تعرف Angular أن القالب يعتمد عليها، فتحدّث binding تلك فقط. هذه هي reactivity دقيقة النطاق أثناء العمل.

استدعاء Signals في معالجات الأحداث

اربط الأحداث بطرائق المكوّن التي تحدّث signals. وسيعيد القالب التصيير تلقائيًا لـ bindings المتأثرة.

@Component({
  selector: 'app-counter',
  template: '<button (click)="inc()">{{ count() }}</button>'
})
export class CounterComponent {
  count = signal(0);
  inc() { this.count.update(v => v + 1); }
}

Signals في Property Bindings

يمكنك استدعاء signal داخل أي binding، بما في ذلك property bindings وattribute bindings.

// disabled when count reaches 0
// template: <button [disabled]="count() === 0">Go</button>

Signals مع Built-in Control Flow

تستخدم القوالب الحديثة كتل built-in control flow. وتقرأ signal داخل كتلة if باستدعائها.

// template:
// @if (count() > 0) {
//   <p>Positive</p>
// }

Computed Signals في القوالب

تُعد القيم المشتقة مناسبة جدًا للقوالب. إذ تعيد computed signal الحساب فقط عند تغيّر مصادرها، وتُقرأ بالطريقة نفسها.

import { signal, computed } from '@angular/core';

export class CartComponent {
  qty = signal(2);
  price = signal(10);
  total = computed(() => this.qty() * this.price());
}

قراءة Computed في الواجهة

اقرأ computed signal في القالب مثلما تقرأ أي signal.

// template: <p>Total: {{ total() }}</p>

سبب الكفاءة

لأن Angular تتتبع بدقة تعبيرات القالب التي تقرأ كل signal، يمكنها تخطي العمل الخاص بأجزاء الواجهة التي لا تعتمد على signal التي تغيّرت.

مشكلة شائعة: نسيان الأقواس

إذا كتبت count بدلًا من count() في القالب، فستعرض دالة signal نفسها لا قيمتها. احرص دائمًا على استدعاء signal.

اختبار سريع: القوالب

كيف تظهر signals في القوالب؟

مراجعة: Signals في القوالب

تقرأ signals في القوالب باستدعائها باستخدام الأقواس، من دون async pipe ومن دون وجود شيء لإلغاء الاشتراك فيه. تحدّث Angular bindings التي تعتمد على signal متغيّرة فقط، وتعمل computed signals بالطريقة نفسها. لقد أتممت أساسيات Signals.

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

هل درس «الإشارات في القوالب» مجاني؟

نعم — نص درس «الإشارات في القوالب» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 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