async Pipe
اشتركوا داخل القوالب دون تنظيف يدوي
async Pipe درس مجاني في Angular Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Angular Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Angular Academy 4 دروس في المجموع.
ما الذي يفعله async pipe
يشترك async pipe في Observable (أو Promise) داخل القالب، ويعرض أحدث قيمة صادرة، ويلغي الاشتراك تلقائيًا عند تدمير المكوّن.
الاستخدام الأساسي
اربط observable مباشرةً في القالب ومرّره عبر async.
@Component({
template: '<p>{{ message$ | async }}</p>'
})
export class HelloComponent {
message$ = of('Hello from RxJS');
}عرض الكائنات باستخدام async
يعمل مع أي نوع من القيم الصادرة. ويمكن دمجه مع pipes أخرى مثل json أو date.
user$ = this.http.get('/api/me');
// template:
// <pre>{{ user$ | async | json }}</pre>تجنب الاشتراكات المتعددة
ينشئ كل استخدام لـ async اشتراكًا. واستخدامه مرات عديدة مع observable نفسه يؤدي إلى تشغيل عدة طلبات HTTP. استخدم صيغة as للاشتراك مرة واحدة.
<!-- one subscription, reused as "user" -->
<div *ngIf="user$ | async as user">
<p>{{ user.name }}</p>
<p>{{ user.email }}</p>
</div>مع تدفق التحكم الجديد
في Angular الحديث، استخدم @if مع as لتطبيق نمط الاشتراك الواحد نفسه.
@if (user$ | async; as user) {
<p>{{ user.name }}</p>
<p>{{ user.email }}</p>
}القيمة null أثناء الانتظار
قبل الإصدار الأول، يعيد async القيمة null. عالج حالة التحميل صراحةً.
@if (data$ | async; as data) {
<list [items]="data" />
} @else {
<p>Loading...</p>
}لا حاجة إلى إلغاء الاشتراك يدويًا
يلغي pipe الاشتراك تلقائيًا عند التدمير، مما يزيل فئة كاملة من تسربات الذاكرة. ولهذا يُعد الطريقة المفضلة لاستهلاك observables في القوالب.
تبديل observables
إذا تغيّر مرجع observable المرتبط، يلغي async pipe الاشتراك في القديم ويشترك في الجديد تلقائيًا.
search(term: string) {
this.results$ = this.http.get('/api/search?q=' + term);
// async pipe swaps subscriptions for you
}استخدام async pipe مع BehaviorSubject
يوفر الجمع بين خدمة BehaviorSubject وasync pipe واجهة مستخدم تفاعلية واضحة دون كتابة شيفرة اشتراك يدوية.
// service: readonly count$ = this.subject.asObservable();
// template: <span>{{ count$ | async }}</span>async pipe مقابل toSignal
يدير كلاهما الاشتراكات تلقائيًا. يعمل async pipe في القالب، بينما ينقل toSignal() القيمة إلى شيفرة المكوّن على هيئة signal. اختر بناءً على المكان الذي تحتاج فيه إلى القيمة.
import { toSignal } from '@angular/core/rxjs-interop';
user = toSignal(this.http.get('/api/me'));
// template: {{ user()?.name }}ملخص أفضل الممارسات
فضّل async pipe (أو toSignal) على الاشتراك اليدوي في المكوّنات. استخدم as لتجنب الاشتراكات المكررة، وعالج دائمًا حالة null/التحميل الأولية.
تحقق سريع
اختبر مدى فهمك لـ async pipe.
مراجعة: Async Pipe
يشترك async pipe داخل القالب وينظف موارده عند التدمير.
- استخدم
as(مع @if أو *ngIf) للاشتراك مرة واحدة. - يعيد null قبل الإصدار الأول — لذا عالج حالة التحميل.
- هو الخيار المفضل للقوالب بدلًا من الاشتراكات اليدوية.
لقد أتممت أساسيات RxJS.
الأسئلة الشائعة
هل درس «async Pipe» مجاني؟
نعم — نص درس «async Pipe» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Angular Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Angular Academy 4 دروس في المجموع.
ماذا ستتعلم في «async Pipe»؟
اشتركوا داخل القوالب دون تنظيف يدوي تتمرن على Angular Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Angular Academy؟
لا تُشترط خبرة سابقة. Angular Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.
كم من الوقت يستغرق درس «async Pipe»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Angular Academy هذا؟
نعم. كل درس في Angular Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.