1) Signals vs RxJS: إنشاء متغير Signal من الصفر في Angular 16 ومقارنته بـ Observable.

في مثال حيث لدينا قائمة شريط جانبي وقائمة علوية، في كل مرة نضغط فيها على زر، ستخبر القائمة العلوية قائمة الشريط الجانبي بالانهيار:

مع RxJS:

يتم هذا الاتصال في خدمة تستخدم موضوعًا وقابلاً للملاحظة، حيث في كل مرة ننقر فيها على الزر، يتم استدعاء التالي، والذي يمرر القيمة المنبعثة إلى الشيء المشترك الذي يمكن ملاحظته. سيتم ببساطة الاشتراك في مكون قائمة الشريط الجانبي وسيستخدم هذه الخاصية في HTML. أولاً نقوم بإنشاء الموضوع في الخدمة، ثم نقوم بإنشاء ما يمكن ملاحظته منه، ونستدعي التالي لتمرير القيمة المنبعثة:

مع الإشارات:

يمكن القيام بذلك ببساطة باستخدام الإشارات. تم إنشاء الإشارات في Angular لتحقيق أداء أفضل في بعض الحالات الأبسط. يتم استيرادها من @angular/core.

تحتاج إلى الإعلان عن إشارة، وفي كل مرة نقوم بتحديث تلك الإشارة، نتصل بها. في مكون قائمة الشريط الجانبي، علينا فقط الإشارة إلى تلك الخاصية، ولاستخدام الإشارة في HTML، نحتاج إلى وضع قوسين حولها للحصول على قيمتها، حيث يتم استخدام الإشارات بهذه الطريقة.

يمكننا أيضًا إجراء تحديث له فائدة إضافية تتمثل في إخبارنا بالقيمة السابقة. ولهذا نحدد أنه يستقبل القيمة السابقة ونوعها، وبدالة السهم نشير إلى القيمة الجديدة وهي القيمة الجديدة الملغاة:

هناك أيضًا طرق لتحويل العناصر القابلة للملاحظة إلى إشارات والإشارات إلى عناصر قابلة للملاحظة:

لا يعني ذلك أن الإشارات هي بديل للموضوعات، حيث أن كلاهما، إلى جانب العناصر القابلة للملاحظة، أقوى بكثير ولديهما العديد من الميزات، مثل مشغلي RxJS (لدينا تحكم أكبر بكثير مع RxJS). ومع ذلك، توفر الإشارات طريقة بسيطة للعمل وهي شائعة مع المكتبات والأطر الأخرى.

RxJS هي مكتبة من Microsoft وليست Angular. في المقابل، Signals هي مكتبة من Angular توفر قدرًا أكبر من التحكم والأداء، حيث تتيح لـ Angular معرفة الجزء الذي تغير بالضبط عندما تتغير الحالة. وهذا يتجنب الاضطرار إلى إعادة عرض المكون بأكمله، مع التركيز فقط على هذا الجزء المحدد.

2) طريقة مبسطة جديدة لإلغاء الاشتراك باستخدام takeUntilDestroyed من RxJS في Angular 16.

في Angular، من المهم إلغاء الاشتراك في العناصر التي يمكن ملاحظتها. في مثال، في OnInit، نقوم بتخزين اشتراك، وفي OnDestroy، نقوم بإلغاء الاشتراك.

كانت الطريقة القديمة هي تخزين متغير مع الاشتراك، وفي وقت الاشتراك، احفظه في هذا المتغير وقم بتدمير هذا الاشتراك في OnDestroy:

شرح تفصيلي: يتم إنشاء خاصية من النوع الاشتراك (من RxJS). تتم تهيئة هذه الخاصية في ngOnInit، وتعيينها كمرجع للاشتراك عند إنشائه. ثم، في ngOnDestroy، يتم إلغاء الاشتراك. إذا لم يحدد المكون متغير الاشتراك، فمن الضروري معالجة الخطأ، إما باستخدام علامة استفهام للتحقق مما إذا كان محددًا أو من خلال شرطي.

الآن، يمكن القيام بذلك بشكل أكثر بساطة، دون إنشاء OnDestroy أو متغير اشتراك، وذلك باستخدام عامل تشغيل RxJS takeUntilDestroyed. ما يفعله هذا هو إلغاء الاشتراك تلقائيًا عندما يكون المكون على وشك التدمير. من المهم إدخال خدمة DestroyRef وتمريرها، حتى تعرف متى يتم تدمير المكون:

شرح تفصيلي: الآن، في حالة عدم إلغاء الاشتراك، نضيف أنبوب RxJS ونرسل إليه takeUntilDestroyed()، وهو عامل تشغيل جديد، والذي يتطلب منا تمرير Ref المدمر، وهي خدمة (من @angular /core) التي يمكننا إدخالها في المنشئ.

مثال: في خدمة الشريط الجانبي، يتم الاستماع إلى نقرة زر في مكون شريط التنقل. باستخدام takeUntilDestroyed()، يتم إلغاء الاشتراك فقط عند تدمير المكون، مما يتجنب الاشتراكات المتعددة. في هذه الحالة، نريد دائمًا الاستماع إلى ما إذا تم الضغط على الزر أم لا؛ لذلك، نريد فقط إلغاء الاشتراك في حالة تدمير المكون.

من المهم القيام بذلك، وإلا فسيتم الاستماع إليه حتى لو كنا في مكونات أخرى، ولن يتم إلغاء الاشتراك إلا إذا أغلقنا التطبيق نظرًا لتدمير المكون. وهذا أمر بالغ الأهمية لأنه إذا كان نشطًا دائمًا، فعند التنقل عبر مكونات الصفحة، على سبيل المثال، في التنقل الأول، فإنه يشترك، ثم ننتقل إلى صفحة أخرى، وعندما نعود إلى الصفحة الأولى، سيكون ذلك اشتراكًا ثانيًا، مما أدى إلى اشتراكين نشطين. وبالتالي، من المهم إلغاء الاشتراك.

ملاحظة مهمة: عندما نشترك في طلب HTTP، ليس من الضروري إلغاء الاشتراك، حيث يتم ذلك تلقائيًا.

3) تأثير الإشارة في الزاوي. الاستماع للتغييرات في الإشارة.

في أحد الأمثلة، لدينا إشارة تُرجع قيمة منطقية وبطريقة أدناه، يتم تحديثها بتحديث:

تخيل أنك تريد أن يتم تنبيهك كلما تغيرت الإشارة، ولكنها تتغير من أماكن عديدة، وليس فقط من هذه الطريقة. إذا أردنا أن نفعل شيئًا ما كلما تغير، فيمكننا أن نفعل ذلك بتأثير. تأخذ هذه الوظيفة إشارة وتتحقق مما إذا كانت تتغير لتنفيذ الطريقة تلقائيًا ضمن التأثير:

باستخدام هذا، على سبيل المثال، بدلاً من سجل وحدة التحكم، يمكننا حفظ القيمة في وحدة التخزين المحلية وإنشاء مثيل لها بهذه القيمة. وهذا مفيد بشكل خاص عند العمل باستخدام تعليمات برمجية لا نعرفها وغير متأكدين من عدد الأماكن التي يتم تعديلها منها.

— ملاحظات مبنية على الدورة التدريبية Angular من EfisioDev —