الآن بعد أن كان لديك مقدمة الأولى للبرمجة التفاعلية، RxJS،
واستخدام نمط المراقب
وكيف يعزز Angular نمط المراقب ويدعم البرمجة التفاعلية،
دعونا ننتقل إلى أول تمرين لدينا للحصول على أقدامنا
الرطب باستخدام الملاحظات في Angular.
في هذا التمرين، سنقوم بتحديث خدماتنا للاستفادة من الملاحظات،
لأنه عندما ننتقل إلى الوحدة التالية حيث سننظر إلى دعم HTTP في Angular،
سنفهم على الفور أن دعم HTTP في Angular يستند إلى المرصد.
لذلك، انها فكرة جيدة بالنسبة لنا
للتعرف على أنفسنا باستخدام الملاحظة في هذا الدرس نفسه.
لذلك، سنقوم بتحديث الخدمات لتصدير الملاحظات.
بعد ذلك، ضمن مكوناتنا،
سوف نشارك في هذه الملاحظات
والحصول على البيانات المطلوبة لتقديم وجهات النظر.
دعونا نذهب إلى التمرين التالي.
يجب أن تتساءل،
كيف يمكننا الاستفادة من RxJS داخل Angular،
وهل هو متاح بالفعل لنا؟
لذلك ما ستلاحظه هو أنه مع CLI Angular،
عندما تقوم بتسوية تطبيق Angular الخاص بك،
يتم تضمين RxJS تلقائيًا هناك.
لذلك، إذا ذهبت إلى ملف package.json،
فستلاحظ أنه ضمن التبعيات،
يتم تضمين مكتبة RxJS بالفعل داخل التطبيق الخاص بك.
لذلك، كل ما تحتاج إلى استخدامه من RxJS متاح بالفعل لك.
حتى نتمكن من المضي قدما واستخدام مكتبة RxJS على الفور داخل تطبيق Angular الخاص بنا.
إذا كنت تقوم ببناء تطبيق Angular الخاص بك من الصفر،
فأنت بحاجة إلى إجراء تثبيت npm لـ RxJS بشكل صريح.
الذهاب إلى ملف dish.service.js،
اسمحوا لي أولا استيراد
من لدينا «rxjs» الملاحظات.
سنقوم أيضًا باستيراد- الآن،
عند استخدام RxJS داخل تطبيق Angular الخاص بك،
لا يتم تضمين المكتبة بأكملها.
يمكنك فقط استيراد أي أجزاء تحتاج إليها من مكتبة RxJS،
ثم استخدامها داخل تطبيق Angular الخاص بك.
لذلك، عندما يتم إعداد تطبيق Angular الخاص بك أخيراً للنشر،
سيتم تضمين الأجزاء فقط من RxJS المطلوبة في تطبيق Angular الخاص بك.
مشغل التأخير
المشغل تأخير تمكننا من تأخير انبعاث هذا البند من لدينا يمكن ملاحظتها.
الخوض في الأساليب،
سنقوم الآن بتحديث هذه الأساليب للاستفادة من المرصد،
وسوف نعيد وعد عن طريق تحويل
الملاحظة إلى وعدك باستخدام مشغل ToPromess.
لذلك، إذا كنت بالفعل تحتوي على مكونات تستخدم الوعود،
وتريد عدم تعديل المكونات،
فيمكنك ببساطة تحويل عنصر يمكن
ملاحظته إلى وعدك ثم إرسال الوعد إلى مكوناتك.
كما أدركنا، ستصدر الوعود عنصرًا واحدًا فقط،
في حين يمكنك أن ترى أن المرصد يعتمد على التدفقات.
لذلك، هذا هو القيد الذي ستحصل عليه إذا كنت
تستخدم فقط مشغل الوعد اثنين على المرصد
والاستفادة منه لأن مشغل ToPromise
سيمكن ملاحظتك من إصدار قيمة واحدة فقط.
ولكن في الوقت الحالي دعونا نفعل ذلك كخطوة أولى قبل أن
ننتقل إلى التنفيذ الكامل الملحوظ لخدماتنا.
لذلك، والذهاب إلى طريقة getDuses،
وأنا ذاهب للعودة هذه الأطباق.
لذلك, أنا ذاهب لإزالة هذا الجزء ومن ثم أقول, عودة.
إذا كنت تريد أن تنبعث منها قيمة واحدة فقط من ملاحظتك،
فستستخدم الطريقة،
والتي ستأخذ أي قيمة تريد أن تنبعث منها هناك.
هذا يكفي لطلبنا الحالي في الوقت الحالي.
لذلك، نحن ذاهبون للاستفادة من ذلك،
وأيضا نريد تأخير انبعاث القيمة بمقدار ثانيتين.
لذلك، أنا ذاهب لتغيير هذا الجزء من التعليمات البرمجية لاستخدام
عامل تأخير لبلدي يمكن ملاحظتها، وذلك باستخدام الأنابيب.
أحتاج إلى تحويل هذا toPromise وإنبعاث الوعد.
حتى الآن، يتم تحديث طريقة getDuses الخاصة بي للاستفادة من ملاحظة،
ومن ثم تحويل ذلك إلى وعد ثم إرسال الوعد إلى المكون الخاص بي.
لذلك لا أحتاج إلى إجراء أي تحديثات للمكون.
دعونا نستخدم نفس الأسلوب لتحديث الطريقتين المتبقيتين من خدمتي هنا.
لذلك أنا فقط ذاهب لنسخ هذا الجزء،
ومن ثم تحديث هذا الجزء،
ثم اتخاذ جزء تأخير منه،
ومن ثم تحديث هذا الجزء لاستخدام التأخير
وتحويل هذه الطريقة توبروميس.
لذلك مع ذلك، يتم تحديث طريقة getDish الخاصة بي أيضًا.
اسمحوا لي أن أفعل نفس الشيء إلى طريقة جيتفيتوريدديش.
مرة أخرى، إذا كنت
تريد، يمكنك كتابة كل شيء.
أنا مجرد كسول لقطع ولصق وتغيير الأجزاء التي
أريد تغييرها وتحويل هذه الطريقة ToPromise.
هذا كل شيء يتم تحديث خدمتي الآن لإرجاع الوعود من ملاحظة هنا.
لذلك، مع هذا التحديث،
يتم تحديث خدمة الطبق الخاص بي للاستفادة من الملاحظة
بدلاً من استخدام القيم مباشرة.
وبالمثل، المضي قدما وتحديث الخدمة الرائدة وخدمة الترقية.
ستلاحظ الآن أنني قمت بالفعل بتحديث
خدمة القائد للاستفادة من المرصد.
وبالمثل، قمت أيضا بتحديث خدمة الترويج للاستفادة من الملاحظات.
حفظ التغييرات ودعونا نذهب ونلقي نظرة على طلبنا.
عندما تذهب إلى المتصفح،
ستلاحظ أن التطبيق الخاص بك ينفذ بالضبط بنفس الطريقة كما كان من قبل
ويجلب البيانات من الخدمات تماما كما كان من قبل.
لذلك ليس الكثير من التغيير داخل التطبيق الخاص بك على هذا النحو.
فإنه يؤدي بالضبط نفس الشيء.
لذلك، لاحظ أنه من خلال استبدال وعودك بالملاحظة،
لم يكن هناك الكثير من التغيير داخل التطبيق الخاص بك كما تتوقع ذلك.
الآن، دعنا نَذْهبُ خطوة أخرى إلى الأمام.
سنسمح الآن لخدماتنا بإرجاع المرصد،
وسنقوم بتحديث المكونات للاستفادة من المرصد.
السبب كما ذكرت،
هو أنه عندما نقوم بتحديث خدماتنا لاستخدام
خدمة HTTP للانتقال إلى خادم لجلب البيانات،
فإننا نلاحظ أنه في Angular، ستعود أساليب HTTP بالملاحظة.
يمكن للخدمات ببساطة تمرير الملاحظات إلى مكوناتنا والسماح
للمكونات الاشتراك في هذه الملاحظات والاستفادة
من البيانات التي يحصلون عليها بذلك.
لذا، ستكون هذه خطوة وسيطة بالنسبة لنا للوصول إلى تلك المرحلة.
سوف نحصل على نظرة على هتب في الوحدة التالية.
بالعودة إلى خدماتنا،
يمكنك الآن إزالة ToPromise أولاً عن طريق إزالة
مشغل ToPromise لأننا لا نحتاج إليه
بعد الآن، وبعد ذلك سنقوم ببساطة بإزالة ToPromise من هذا،
واستيراد يمكن ملاحظته، ثم السماح بدلاً من ذلك
بطريقتنا بإرجاع
الملاحظات بدلاً من الوعود .
لذلك كما ذكرت،
مهما كان الوعد يمكن القيام به يمكن ملاحظته أيضا.
لذلك، دعونا تحديث كل هذه لإرجاع الملاحظات.
افعل الشيء نفسه مع الخدمتين المتبقيتين.
ستلاحظ الآن أنني قمت أيضًا بتحديث خدمة القائد
ببساطة لإرجاع المرصد بدلاً من الوعود،
كما تم
تحديث خدمة الترويج بشكل مماثل للعودة إلى الملاحظة بدلاً من الوعود.
الآن ما يعنيه هذا هو أننا بحاجة للذهاب وتحديث مكوناتنا
للاستفادة من الملاحظات بدلا من الوعود كما فعلنا في وقت سابق.
الآن من أجل الوعد، رأينا أننا بحاجة إلى
استخدام.then للحصول على النتيجة عندما يتم تنفيذ عزم الوعد.
مع ملاحظة، يتم تحويل.then إلى.subric.
ستبقى الطريقة التي تستهلك بها البيانات كما هي تمامًا.
لذلك مع هذا التغيير الطفيف داخل مكوناتك،
ستتمكن المكونات الآن من التعامل مع المرصد بدلاً من الوعود.
لذلك، والذهاب إلى جميع المكونات الأربعة التي تستفيد من الخدمات،
أولا، دعونا نذهب إلى ملف menu.component.ts.
في ملف menu.component.ts،
ستلاحظ على الفور الخط الأحمر المتعرج هناك،
تحت ذلك الحين من الواضح لأننا لا نعيد وعد.
بدلا من ذلك نحن نعيد ملاحظتها.
حتى مجرد تحويل ذلك ثم للاشتراك وهذا كل شيء. أصبح
مكون القائمة الخاص بك الآن قادرًا
على استهلاك القيم القابلة للملاحظة التي تنبعث من القيم القابلة للملاحظة.
قم بإجراء نفس التغيير على ملف.component.ts حول ملف
dishdetail.component.ts وملف home.component.ts.
بعد تحديث ملفات Tapscott المكون المتبقي،
دعنا نذهب وننظر إلى سلوك تطبيقنا في المتصفح.
انتقل إلى المتصفح، ستلاحظ أي فرق في سلوك تطبيقنا.
يتم تحديث هذا الإصدار من تطبيق Angular الخاص بنا لاستخدام
الملاحظات بدلاً من الوعود.
لذلك، المكون الرئيسي هنا،
حول المكون يؤدي بالضبط بنفس الطريقة كما كان من قبل،
ومكون القائمة يفعل بالضبط نفس الشيء.
أيضا عنصر تفاصيل الطبق سوف تتصرف بالضبط بنفس الطريقة كما كان من قبل.
مع هذا، نكمل هذا التمرين.
في هذا التمرين، اتخذنا خطواتنا الأولى نحو استخدام
الملاحظات داخل تطبيق Angular الخاص بنا من خلال تحديث
الخدمات والمكونات المقابلة
للاستفادة من الملاحظات بدلاً من الوعود.
هذا هو الوقت المناسب بالنسبة لك للقيام git الالتزام مع الرسالة RxJS الجزء الأول.