1
00:00:03,680 --> 00:00:10,440
الآن بعد أن كنت قد حصلت على قدميك الرطب مع الملاحظات الزاوي في التمرين السابق،

2
00:00:10,440 --> 00:00:11,860
كنت تنظر إلى الوراء وتقول،

3
00:00:11,860 --> 00:00:14,320
«أوه الملاحظات ليست سيئة بعد كل شيء،

4
00:00:14,320 --> 00:00:17,070
فهي واضحة إلى حد ما للاستفادة من.»

5
00:00:17,070 --> 00:00:19,125
لذلك، نحصل على أكثر طموحا قليلا.

6
00:00:19,125 --> 00:00:25,080
دعونا نذهب خطوة أخرى إلى الأمام ومن ثم الاستفادة من المدمج في يمكن ملاحظتها داخل Angular.

7
00:00:25,080 --> 00:00:27,960
المعلمات التي يمكن ملاحظتها والتي تأتي

8
00:00:27,960 --> 00:00:32,655
من خدمة المسار تنشيط داخل وحدة جهاز التوجيه لدينا.

9
00:00:32,655 --> 00:00:35,940
سنقوم الآن بتحديث مكون تفاصيل الطبق،

10
00:00:35,940 --> 00:00:39,630
للاستفادة من المعلمات التي يمكن ملاحظتها من

11
00:00:39,630 --> 00:00:42,770
خدمة الجفاف المنشط

12
00:00:42,770 --> 00:00:47,975
لدعم بعض الميزات الجديدة في تطبيق Angular الخاص بنا.

13
00:00:47,975 --> 00:00:52,400
قبل أن ننتقل إلى تحديث مكون تفاصيل الطبق،

14
00:00:52,400 --> 00:00:57,650
أريد أن أعرض طريقة أخرى في ملف service.ts الخاص بي.

15
00:00:57,650 --> 00:01:02,735
حتى فتح ملف service.ts طبق ثم سنقوم بإضافة طريقة جديدة تسمى

16
00:01:02,735 --> 00:01:08,060
GetDishids وهذا في الأساس

17
00:01:08,060 --> 00:01:14,715
سيعود كل معرفات الطبق لجميع الأطباق في مجموعتنا من الأطباق.

18
00:01:14,715 --> 00:01:17,650
لذلك، للقيام بذلك، سوف نستخدم عودة

19
00:01:17,650 --> 00:01:26,535
وطريقة وقبل أن أفعل ذلك،

20
00:01:26,535 --> 00:01:31,915
وهذا هو إرجاع ملحوظ.

21
00:01:31,915 --> 00:01:33,480
من أي نوع؟

22
00:01:33,480 --> 00:01:38,690
هذا هو إرجاع يمكن ملاحظته والذي يتكون من مجموعة من

23
00:01:38,690 --> 00:01:44,510
السلسلة ودعونا تأخير

24
00:01:44,510 --> 00:01:50,385
ذلك بمقدار 2،000 ميلي ثانية أو ثانيتين.

25
00:01:50,385 --> 00:01:52,415
إذن، ما الذي نريد العودة إليه؟

26
00:01:52,415 --> 00:01:54,895
نحن نريد أن نأخذ مجموعة الأطباق،

27
00:01:54,895 --> 00:01:58,730
واستخراج جميع المعرفات من مجموعة الأطباق ومن

28
00:01:58,730 --> 00:02:02,665
ثم إعطائها لمكون صحن التفاصيل لدينا،

29
00:02:02,665 --> 00:02:06,305
لأننا بحاجة إلى ذلك داخل مكون تفاصيل الطبق الخاص بنا لتنفيذ

30
00:02:06,305 --> 00:02:10,365
الميزة الجديدة التي سنقوم بدعمها في تطبيقنا.

31
00:02:10,365 --> 00:02:13,725
الآن، هذه إحدى الطرق التي أريد تنفيذها.

32
00:02:13,725 --> 00:02:18,825
في وقت لاحق، يمكننا أن نرى كيف يمكننا أن نفعل ذلك بطريقة أفضل بكثير،

33
00:02:18,825 --> 00:02:21,240
في واحدة من التدريبات اللاحقة.

34
00:02:21,240 --> 00:02:24,680
في الوقت الحالي، مع طريقة تنفيذ الخدمة،

35
00:02:24,680 --> 00:02:32,455
وهذا هو أفضل ما يمكنني القيام به لتنفيذ هذا الحل لإظهار ميزة جديدة.

36
00:02:32,455 --> 00:02:33,850
لذا، ضمن الملاحظة،

37
00:02:33,850 --> 00:02:35,050
ما سأفعله هو،

38
00:02:35,050 --> 00:02:40,070
سآخذ مجموعة الأطباق وصفيف الأطباق.

39
00:02:40,070 --> 00:02:43,770
سأستخدم الخريطة،

40
00:02:44,020 --> 00:02:49,670
مشغل صفيف، خريطة مشغل مصفوفة JavaScript.

41
00:02:49,670 --> 00:02:51,410
لذا، فإن مشغل الخريطة،

42
00:02:51,410 --> 00:02:58,700
كيف يعمل هو أنه يأخذ كل عنصر من مجموعة الأطباق ويمكننا تعيين

43
00:02:58,700 --> 00:03:01,760
هذا العنصر إلى عنصر آخر ثم إنشاء

44
00:03:01,760 --> 00:03:06,195
مصفوفة أخرى ثم إرجاع ذلك الصفيف المعدل.

45
00:03:06,195 --> 00:03:10,520
لذلك، لكل عنصر في مجموعة الأطباق الخاصة بي،

46
00:03:10,520 --> 00:03:14,315
وأنا ذاهب لاتخاذ هذا البند ثم بدلا من ذلك

47
00:03:14,315 --> 00:03:20,510
استخراج معرف الطبق ومن ثم من معرف الطبق.

48
00:03:20,510 --> 00:03:25,880
لذلك، سوف ينتهي بي الأمر ببناء مصفوفة جديدة للخروج منه،

49
00:03:25,880 --> 00:03:28,420
والتي تحتوي فقط على المعرفات،

50
00:03:28,420 --> 00:03:33,515
لذلك مجموعة من المعرفات ونرى بالفعل أن المعرفات هي سلسلة،

51
00:03:33,515 --> 00:03:37,920
وهذا ما سأعود من معرف الطبق الخاص بي هنا.

52
00:03:37,920 --> 00:03:41,500
هذا كل شيء، مشغل مصفوفة الخريطة.

53
00:03:41,500 --> 00:03:44,800
إذا نظرت إلى مشغلي صفيف JavaScript،

54
00:03:44,800 --> 00:03:47,760
فسترى ما يفعله مشغل مصفوفة الخرائط. في

55
00:03:47,760 --> 00:03:50,540
الواقع، فإن مشغل مصفوفة الخرائط

56
00:03:50,540 --> 00:03:53,240
مثير للاهتمام أيضًا من منظور المرصد،

57
00:03:53,240 --> 00:03:55,910
لأنه يمكن ملاحظته كما رأيت،

58
00:03:55,910 --> 00:03:58,950
يمكن أيضًا النظر إليه كمصفوفة،

59
00:03:58,950 --> 00:04:00,805
تيار من القيم،

60
00:04:00,805 --> 00:04:02,330
والتي يمكن رؤيتها كمصفوفة.

61
00:04:02,330 --> 00:04:05,560
لذلك، يمكن أيضًا استخدام مشغل الخريطة في المرصد.

62
00:04:05,560 --> 00:04:11,935
ولكن في هذه اللحظة، أستخدمه ببساطة كمشغل صفيف جافا سكريبت.

63
00:04:11,935 --> 00:04:13,660
دعونا حفظ التغييرات.

64
00:04:13,660 --> 00:04:20,815
الآن، سوف نذهب إلى مكون تفاصيل الطبق ثم تحديث مكون تفاصيل الطبق.

65
00:04:20,815 --> 00:04:23,129
الآن، ضمن مكون تفاصيل الطبق،

66
00:04:23,129 --> 00:04:24,790
جنبا إلى جنب مع الطبق،

67
00:04:24,790 --> 00:04:29,940
سأقوم بإعلان متغير يسمى ديشيدس،

68
00:04:29,940 --> 00:04:32,755
وهو مجموعة من السلسلة.

69
00:04:32,755 --> 00:04:36,470
هذا ديشيدس سوف تخزين جميع المعرفات من

70
00:04:36,470 --> 00:04:42,225
جميع الأطباق التي هي في مجموعتي من الأطباق في القائمة بلدي.

71
00:04:42,225 --> 00:04:45,410
ثم، سيكون لدي أيضا

72
00:04:45,640 --> 00:04:53,490
اثنين من المتغيرات الأخرى تسمى السابقة والقادمة من سلسلة نوع.

73
00:04:53,490 --> 00:04:55,215
الآن، لماذا أحتاج هذه؟

74
00:04:55,215 --> 00:04:56,980
سيصبح ذلك أكثر وضوحًا،

75
00:04:56,980 --> 00:04:58,790
بمجرد تنفيذ العرض،

76
00:04:58,790 --> 00:05:00,560
حيث سأستفيد من هذا.

77
00:05:00,560 --> 00:05:04,480
الآن، ما سأفعله هنا هو أنه،

78
00:05:04,480 --> 00:05:10,610
داخل بلدي ngInit في وقت سابق،

79
00:05:10,610 --> 00:05:18,800
سمحنا للمعرف يساوي بالإضافة إلى هذا المسار.

80
00:05:18,800 --> 00:05:22,565
عندما فعلت هذا في التمرين السابق،

81
00:05:22,565 --> 00:05:28,580
لم أشرح لك ما كانت تفعله اللقطة ولماذا نفعل ذلك بهذه الطريقة؟

82
00:05:28,580 --> 00:05:31,490
لأنك كنت بحاجة إلى فهم الملاحظات،

83
00:05:31,490 --> 00:05:34,060
قبل أن تفهم ما تعنيه اللقطة.

84
00:05:34,060 --> 00:05:43,940
الآن، في Angular، توفر خدمة المسار المنشط مجموعة من المرصد.

85
00:05:43,940 --> 00:05:46,775
واحدة من الملاحظات تسمى المعلمات.

86
00:05:46,775 --> 00:05:48,860
ما تقدمه لنا هذه المعلمات،

87
00:05:48,860 --> 00:05:56,030
هو طريقة للحصول على قيم المعلمات داخل عنوان URL الخاص بي.

88
00:05:56,030 --> 00:06:00,170
لذلك، رأيت أنه عند تقديم معلمات المسار،

89
00:06:00,170 --> 00:06:03,605
قمت بتقديم أحد معلمات المسار كمعرف نقطتين.

90
00:06:03,605 --> 00:06:07,590
يصبح معرف القولون هذا متاحًا كملاحظة.

91
00:06:07,590 --> 00:06:10,330
لذلك، كلما تغيرت هذه القيمة،

92
00:06:10,330 --> 00:06:15,745
يمكنك ملاحظة التغييرات في هذه القيمة ومن ثم اتخاذ إجراء في المقابل.

93
00:06:15,745 --> 00:06:21,010
ولكن، في وقت سابق عندما قمنا بتنفيذ مكون تفاصيل الطبق،

94
00:06:21,010 --> 00:06:22,825
لم نكن نعرف عن الملاحظ.

95
00:06:22,825 --> 00:06:26,200
لذلك، لم أستطع أن أشرح ما كانت تفعله اللقطة في تلك المرحلة.

96
00:06:26,200 --> 00:06:30,460
الآن، اسمحوا لي أن أعود وأشرح بالضبط ما تفعله اللقطة.

97
00:06:30,460 --> 00:06:32,870
عندما نستخدم هذا كلقطة هنا،

98
00:06:32,870 --> 00:06:34,250
ما نقوم به هو،

99
00:06:34,250 --> 00:06:37,580
نحن نأخذ لقطة واحدة من

100
00:06:37,580 --> 00:06:40,250
خدمة المسار ومن ثم نحصل على

101
00:06:40,250 --> 00:06:43,605
المعلمة التي يمكن ملاحظتها في تلك النقطة الزمنية المحددة.

102
00:06:43,605 --> 00:06:46,310
قيمة المعلمات في تلك النقطة المحددة من

103
00:06:46,310 --> 00:06:49,340
الزمن ومن ثم الاستفادة منها في تطبيقنا.

104
00:06:49,340 --> 00:06:51,730
على الرغم من أن هذه ليست الطريقة المثالية للقيام بذلك.

105
00:06:51,730 --> 00:06:55,010
بدلاً من ذلك، دعونا نستخدم ما يمكن ملاحظته

106
00:06:55,010 --> 00:06:59,990
مباشرة ثم نرد كلما تغيرت هذه التغييرات الملحوظة.

107
00:06:59,990 --> 00:07:04,650
لذا، كيف يمكننا تحديث هذا الرمز للاستفادة من الملاحظة مباشرة؟

108
00:07:04,650 --> 00:07:08,030
لذلك، ما ندركه هو أنه من خدمة الطريق المنشط،

109
00:07:08,030 --> 00:07:10,390
لدينا المعلمات يمكن ملاحظتها المتاحة لنا.

110
00:07:10,390 --> 00:07:13,070
لذلك، سنستفيد من المعلمات التي يمكن ملاحظتها وفي

111
00:07:13,070 --> 00:07:16,755
أي وقت يكون هناك تغيير في حيث المعلمات يمكن ملاحظتها،

112
00:07:16,755 --> 00:07:22,750
يمكننا بدء تغيير داخل مكون DishDetail الخاص بنا.

113
00:07:22,750 --> 00:07:25,820
اسمحوا لي أن أوضح لكم كيف سنستفيد من

114
00:07:25,820 --> 00:07:28,935
المعلمات التي يمكن ملاحظتها من خلال تحديث هذا الرمز.

115
00:07:28,935 --> 00:07:30,735
لذلك، الذهاب إلى هذا الرمز،

116
00:07:30,735 --> 00:07:32,630
ما سأفعله الآن،

117
00:07:32,630 --> 00:07:37,615
هو أنني سأغير هذا إلى القول،

118
00:07:37,615 --> 00:07:42,950
«لدي هذا الطريق ومن هذا الطريق،

119
00:07:42,950 --> 00:07:45,640
لدي المعلمات المتاحة بالفعل.»

120
00:07:45,640 --> 00:07:50,030
لذلك، أنا ذاهب لإزالة لقطة وأنا استخدام المعلمات.

121
00:07:50,030 --> 00:07:52,060
لذلك، مع هذه المعلمات،

122
00:07:52,060 --> 00:08:00,410
ما لدي الآن هو الوصول إلى المعلمات يمكن ملاحظتها.

123
00:08:00,410 --> 00:08:03,235
الآن، بما أن لدينا هذه المعلمات يمكن ملاحظتها،

124
00:08:03,235 --> 00:08:09,545
سأستخدم مشغل على هذه المعلمات التي يمكن ملاحظتها ثم تعديله.

125
00:08:09,545 --> 00:08:17,275
لذا، فإن المشغل الذي سأستخدمه يسمى مشغل SwitchMap.

126
00:08:17,275 --> 00:08:21,050
يتيح لي مشغل SwitchMap

127
00:08:21,050 --> 00:08:26,230
الاستفادة من المعلمات التي يمكن ملاحظتها وترى الخط الأحمر المتعرج الذي

128
00:08:26,230 --> 00:08:31,590
يعني أنني بحاجة إلى استيراد SwitchMap يمكن ملاحظتها هنا.

129
00:08:31,590 --> 00:08:34,320
لذا، سأذهب إلى

130
00:08:34,320 --> 00:08:39,660
مدخلاتي هنا

131
00:08:39,660 --> 00:08:45,880
ثم سأدخل rxjs والمشغل.

132
00:08:49,640 --> 00:08:52,710
لذلك، من المعلمات يمكن ملاحظتها،

133
00:08:52,710 --> 00:08:57,740
أحصل على المعلمات التي هي من نوع بارامز.

134
00:08:57,740 --> 00:09:05,700
لذلك، تذكر أننا استوردنا المعلمات من مكتبة جهاز التوجيه هنا.

135
00:09:05,700 --> 00:09:07,520
لذلك، انطلقنا إلى المعلمات هنا،

136
00:09:07,520 --> 00:09:12,289
من مكتبة جهاز التوجيه وأيضا قمنا باستيراد خدمة مسار التنشيط هنا،

137
00:09:12,289 --> 00:09:15,800
ومن ثم جعلناها متاحة داخل المنشئ لدينا هنا،

138
00:09:15,800 --> 00:09:18,225
من خلال مسار المنشط.

139
00:09:18,225 --> 00:09:25,055
لذلك، هذا هو السبب في أننا قادرون على القيام بهذه المعلمات الطريق للحصول على عقد من المعلمات يمكن ملاحظتها.

140
00:09:25,055 --> 00:09:27,740
سأستخدم مشغل SwitchMap على المعلمات التي

141
00:09:27,740 --> 00:09:34,049
يمكن ملاحظتها ثم عندما أحصل على المعلمات يمكن ملاحظتها،

142
00:09:34,049 --> 00:09:44,880
ما سأقوم به هو أخذ ذلك ثم أقول، هذا DishService.

143
00:09:45,030 --> 00:09:54,370
GetDish، ومن ثم يجب الحصول على هذا المعرف الآن باستخدام المعلمات.

144
00:09:54,370 --> 00:09:58,600
ترى المعلمة التي لدينا هناك.

145
00:09:58,600 --> 00:10:04,765
من المعلمات، سأقول بين قوسين معرف.

146
00:10:04,765 --> 00:10:11,490
لذا، ما يحدث هو أنه كلما تغيرت المعلمات التي يمكن ملاحظتها القيمة،

147
00:10:11,490 --> 00:10:17,680
مما يعني أن قيمة معلمة المسار تتغير، ثم على الفور،

148
00:10:17,680 --> 00:10:20,900
سيأخذ مشغل خريطة التبديل قيمة المعلمات،

149
00:10:20,900 --> 00:10:25,320
ثم يقوم بـ getDish من DishService الخاص بي.

150
00:10:25,320 --> 00:10:27,060
لذلك، سيتم بدء هذا تلقائيا،

151
00:10:27,060 --> 00:10:31,280
وهذا سيكون متاحا كما الآخر يمكن

152
00:10:31,280 --> 00:10:36,900
ملاحظتها التي تنبعث من خلال القيام هذا المشغل خريطة التبديل على هذا يمكن ملاحظتها.

153
00:10:36,900 --> 00:10:41,580
لذلك، نحن إنشاء جديد يمكن ملاحظته وهو getDish،

154
00:10:41,580 --> 00:10:45,820
الذي سيعود كائن الطبق هنا.

155
00:10:45,820 --> 00:10:49,285
الآن، بمجرد أن نحصل على getDish هناك

156
00:10:49,285 --> 00:10:53,350
، يمكن الآن أن تكون متاحة كملاحظة.

157
00:10:53,350 --> 00:10:57,700
أنا فقط أشترك في ذلك يمكن ملاحظتها باستخدام الاشتراك هنا.

158
00:10:57,700 --> 00:10:59,815
ثم، هناك أحصل على الطبق.

159
00:10:59,815 --> 00:11:03,930
يتم الحصول على هذا الطبق عن طريق القيام بهذا GetDish هنا.

160
00:11:03,930 --> 00:11:08,790
هذا الطبق، ثم يمكنني الاستفادة منه لتعيينه في

161
00:11:08,790 --> 00:11:14,025
متغير الطبق الذي أعلنته في وقت سابق.

162
00:11:14,025 --> 00:11:17,790
لذا، بهذه الطريقة، يتم تحديث طبقي الآن.

163
00:11:17,790 --> 00:11:20,775
لذلك، في أي وقت المعلمات يمكن ملاحظتها التغييرات،

164
00:11:20,775 --> 00:11:24,210
سيتم تحديث طبقي إلى الطبق الجديد.

165
00:11:24,210 --> 00:11:27,590
لذلك، لاحظ كيف أنا أخذ واحد يمكن ملاحظتها، المعلمات يمكن ملاحظتها،

166
00:11:27,590 --> 00:11:33,050
ومن ثم أنا تعيين المعلمات يمكن ملاحظتها في آخر يمكن ملاحظتها والتي هي في الأساس

167
00:11:33,050 --> 00:11:40,675
في جلب قيمة الطبق من بلدي ديشسرفيس،

168
00:11:40,675 --> 00:11:42,955
ومن ثم جعل ذلك متاحا كما يمكن ملاحظتها.

169
00:11:42,955 --> 00:11:48,010
ثم، أنا أشترك في أن يمكن ملاحظتها هنا، وبعد ذلك،

170
00:11:48,010 --> 00:11:49,780
أنا الحصول على قيمة الطبق هنا،

171
00:11:49,780 --> 00:11:52,720
ثم أقوم بتعيين قيمة الطبق أو بالأحرى

172
00:11:52,720 --> 00:11:56,795
جعل متغير الطبق يساوي قيمة الطبق هنا.

173
00:11:56,795 --> 00:12:00,415
لاحظ كيف باستخدام المرصد،

174
00:12:00,415 --> 00:12:04,865
يمكنك الآن أخذ واحد يمكن ملاحظته ثم تعيينه إلى آخر يمكن ملاحظته.

175
00:12:04,865 --> 00:12:06,730
لماذا هذا مثير للاهتمام؟

176
00:12:06,730 --> 00:12:12,680
إذا كان الآن، لدي طريقة لتعديل هذه المعلمة الطريق،

177
00:12:12,680 --> 00:12:19,005
ثم سوف تكون قادرة على التبديل بين أطباق مختلفة ورؤية أطباق مختلفة.

178
00:12:19,005 --> 00:12:22,100
لسوء الحظ، ليس لدي ذلك في المكان

179
00:12:22,100 --> 00:12:25,735
لذلك، أنا بحاجة إلى تعديل مكونات الطبق لتمكينني من القيام بذلك.

180
00:12:25,735 --> 00:12:31,545
الآن، هذا هو المكان الذي سوف تشمل اثنين من الأزرار في وجهة نظري والتي عندما أنقر،

181
00:12:31,545 --> 00:12:36,390
وسوف تكون قادرة على التنقل من خلال قائمة بلدي من الأطباق.

182
00:12:36,390 --> 00:12:38,960
الآن، لتكون قادرة على التنقل من خلال قائمة بلدي من الأطباق،

183
00:12:38,960 --> 00:12:42,005
وأنا بحاجة إلى معرفة مجموعة من جميع الأطباق بلدي،

184
00:12:42,005 --> 00:12:45,525
أو على الأقل أنا بحاجة لمعرفة هوية جميع الأطباق بلدي.

185
00:12:45,525 --> 00:12:51,410
هذا هو السبب في أنني استخدم هذا ديشيدس هنا، حسنا؟

186
00:12:51,410 --> 00:12:58,800
لذلك، الآن ترى لماذا قمت بتضمين طريقة ديشيدس في بلدي ديشسرفيس.

187
00:12:58,800 --> 00:13:01,455
لذلك، ثم أبدأ.

188
00:13:01,455 --> 00:13:05,830
أنا ذاهب أولا الحصول على

189
00:13:05,830 --> 00:13:10,510
ديشيدس عن طريق

190
00:13:10,510 --> 00:13:16,970
استدعاء ديشسرفيس،

191
00:13:17,070 --> 00:13:22,570
جيتديشيدس الأسلوب في هذه المرحلة.

192
00:13:22,570 --> 00:13:25,735
ما زلت أعمل مع الطريقة القديمة للقيام بالأشياء.

193
00:13:25,735 --> 00:13:34,795
لا بد لي من إدراك أن هذا GetDishids يرسل في ملاحظتها.

194
00:13:34,795 --> 00:13:39,365
لذلك، أنا بحاجة إلى الاشتراك في ذلك يمكن ملاحظتها.

195
00:13:39,365 --> 00:13:43,910
ترى كيف تحتاج إلى تغيير طريقة

196
00:13:43,910 --> 00:13:48,340
تفكيرك عندما تعمل مع المتغيرات هنا.

197
00:13:48,340 --> 00:13:52,840
لذلك، نود أن نقول ديشيدس الاشتراك،

198
00:13:52,840 --> 00:13:54,935
وداخل الاشتراك،

199
00:13:54,935 --> 00:14:00,990
وسوف نحصل على المعلمة التي هي مجموعة سلسلة،

200
00:14:00,990 --> 00:14:04,170
وبعد ذلك أود أن أقول الحق هناك،

201
00:14:04,170 --> 00:14:09,970
ديشيدس سيكون مساويا لديشيدس.

202
00:14:09,970 --> 00:14:14,085
انظر، كم هو سهل

203
00:14:14,085 --> 00:14:18,510
لتغيير طريقة تفكيرك عندما تريد التعامل مع أمر يمكن ملاحظته.

204
00:14:18,510 --> 00:14:20,895
لذا، فإن GetDishids يرسل ملاحظة،

205
00:14:20,895 --> 00:14:26,790
وأنا أشترك في ذلك يمكن ملاحظتها ومن ثم لدي ديشيدس هنا المتاحة.

206
00:14:26,790 --> 00:14:29,130
ثم، أيضا عن طريق الاشتراك في المعلمة.

207
00:14:29,130 --> 00:14:31,500
إذا كان بإمكاني تغيير المعلمة الخاصة بي،

208
00:14:31,500 --> 00:14:35,340
قيمة معلمة مسار القيمة داخل شفرتي،

209
00:14:35,340 --> 00:14:38,300
فسأتمكن من التنقل بين الأطباق.

210
00:14:38,300 --> 00:14:41,240
لذلك، دعونا تنفيذ هذا الجزء.

211
00:14:41,240 --> 00:14:43,810
هذا أصبح مثيراً للاهتمام

212
00:14:43,810 --> 00:14:47,515
لذلك، لتمكينني من القيام بذلك،

213
00:14:47,515 --> 00:14:53,190
لذلك سوف أعرض طريقة أخرى هنا تسمى setPrevNext

214
00:14:55,770 --> 00:15:03,480
، ولهذا، سأرسل معلمة Dishid.

215
00:15:03,480 --> 00:15:06,295
الآن، نظرا لبلدي ديشيد الحالي،

216
00:15:06,295 --> 00:15:11,355
أردت أن تكون قادرة على العثور على ديشيد السابق والقادم حتى أتمكن من تنفيذ

217
00:15:11,355 --> 00:15:17,545
بلدي الملاحة بين الأطباق داخل بلدي عنصر ديشيتايل.

218
00:15:17,545 --> 00:15:22,635
لذلك، هذا هو السبب في أنني أعلنت السابقة والقادمة.

219
00:15:22,635 --> 00:15:25,555
الآن، أنا بحاجة إلى أن تكون قادرة على تهيئة هاتين القيمتين.

220
00:15:25,555 --> 00:15:28,650
كل ما أعرفه الآن هو ديشيد الحالي.

221
00:15:28,650 --> 00:15:30,610
لذلك، باستخدام ديشيد الحالي،

222
00:15:30,610 --> 00:15:34,265
أريد أن تكون قادرة على العثور على ديشيد السابق والقادم.

223
00:15:34,265 --> 00:15:36,080
لذلك، في هذه الطريقة،

224
00:15:36,080 --> 00:15:40,255
سأقوم بعمل dished السابق والقادم.

225
00:15:40,255 --> 00:15:42,160
لذلك، هنا سأقول،

226
00:15:42,160 --> 00:15:50,200
دعونا مؤشر يساوي هذا ديشيدس.

227
00:15:50,200 --> 00:15:52,900
الآن، أنا أعرف فقط هوية طبقي،

228
00:15:52,900 --> 00:15:55,360
ولكن هوية طبقي لا تعطيني كل شيء.

229
00:15:55,360 --> 00:16:00,980
أنا بحاجة إلى أن تكون قادرة على العثور على الطبق في هذه المجموعة من المعرفات،

230
00:16:00,980 --> 00:16:06,510
لذلك هذا هو السبب في أنني أقول هذا ديشيدس، و indexOf.

231
00:16:06,510 --> 00:16:13,640
يجب أن تعرف مشغل indexOf على صفيف JavaScript.

232
00:16:13,640 --> 00:16:20,935
يأخذ عامل التشغيل IndexOf قيمة ثم يجد فهرس تلك القيمة في الصفيف.

233
00:16:20,935 --> 00:16:27,605
لذا، IndexOf والمعلمة هنا،

234
00:16:27,605 --> 00:16:29,945
سأعطي هو Dishid،

235
00:16:29,945 --> 00:16:34,765
و Dishid الذي سأحصل عليه في فترة قصيرة.

236
00:16:34,765 --> 00:16:38,765
الآن، بمجرد الحصول على فهرس هذه القيمة الحالية،

237
00:16:38,765 --> 00:16:42,385
يمكنني بعد ذلك تعيين

238
00:16:42,385 --> 00:16:49,420
ديشيدس السابقين.

239
00:16:49,420 --> 00:16:59,080
لذلك، هذا هو المكان الذي

240
00:16:59,080 --> 00:17:08,980
سأفعل بعض الشيء من التعليمات البرمجية صعبة هنا من شأنها أن تسمح لي أن التفاف حولها عندما أكون.

241
00:17:08,980 --> 00:17:15,030
لذلك، لاحظ أن هذا الصفيف ديشيدس يحتوي على عدد معين من القيم هناك.

242
00:17:15,030 --> 00:17:20,270
إذا كانت القيمة الحالية لـ DisHid هي العنصر الأول،

243
00:17:20,270 --> 00:17:24,565
فستكون القيمة السابقة العنصر المفهرسة صفر في الصفيف الخاص بي.

244
00:17:24,565 --> 00:17:26,590
ولكن إذا كانت القيمة الحالية هي العنصر صفر،

245
00:17:26,590 --> 00:17:28,235
العنصر الأول في صفيف بلدي،

246
00:17:28,235 --> 00:17:32,530
ثم أريد أن التفاف حول للحصول على العنصر الأخير في صفيف بلدي.

247
00:17:32,530 --> 00:17:36,770
لذا، هذا هو المكان الذي أستفيد فيه من مشغل modulo مع

248
00:17:36,770 --> 00:17:42,235
بعض الطرق الرياضية للالتفاف حول الأشياء.

249
00:17:42,235 --> 00:17:44,275
لذلك، أود أن أقول هذا ديشيد

250
00:17:44,275 --> 00:18:14,500
زائد مؤشر ناقص واحد، و مودولو هذا طول ديشيدس.

251
00:18:14,500 --> 00:18:15,925
لذلك، ما أفعله هو،

252
00:18:15,925 --> 00:18:19,590
فإن القيمة السابقة ستكون المؤشر الحالي،

253
00:18:19,590 --> 00:18:21,735
مؤشر القيمة الحالية،

254
00:18:21,735 --> 00:18:25,935
بالإضافة إلى طول الأطباق ناقص واحد.

255
00:18:25,935 --> 00:18:27,815
الآن، إذا كان المؤشر هو واحد،

256
00:18:27,815 --> 00:18:29,585
مؤشر ناقص واحد سيعطيني صفر.

257
00:18:29,585 --> 00:18:30,680
إذا كان المؤشر هو صفر،

258
00:18:30,680 --> 00:18:32,670
مؤشر ناقص واحد سيعطيني ناقص واحد،

259
00:18:32,670 --> 00:18:34,210
ولكن هذا ليس ما أريد.

260
00:18:34,210 --> 00:18:38,190
أريد أن التفاف حولها والحصول على طول ديسد ناقص واحد.

261
00:18:38,190 --> 00:18:41,870
لذلك، هذا هو السبب في أنني بما في ذلك هناك،

262
00:18:41,870 --> 00:18:44,995
ومن ثم القيام مودولو مع ديشيدس.

263
00:18:44,995 --> 00:18:47,660
لذلك، عندما يكون الفهرس صفرًا،

264
00:18:47,660 --> 00:18:51,915
سألتف للحصول على العنصر الأخير في صفيفي.

265
00:18:51,915 --> 00:18:56,965
لذا، هذه هي الطريقة التي أقوم بها بتهيئة القيمة السابقة.

266
00:18:56,965 --> 00:18:59,120
ثم، القيمة التالية،

267
00:18:59,120 --> 00:19:02,700
وسوف تستخدم نفس النهج،

268
00:19:02,770 --> 00:19:08,205
ولكن التفاف حولها عن طريق قول مؤشر زائد واحد.

269
00:19:08,205 --> 00:19:11,780
لذلك، إذا كنت حاليا في العنصر الأخير في الصفيف،

270
00:19:11,780 --> 00:19:14,200
ثم أريد أن التفاف حولها إلى الصفر.

271
00:19:14,200 --> 00:19:16,715
لذلك، هذا هو الجزء الآخر من ما أفعله.

272
00:19:16,715 --> 00:19:19,200
لذلك، هناك، أنا تعيين السابق والقادم.

273
00:19:19,200 --> 00:19:21,795
لذا، متى يجب أن أقوم بتعيين السابق والتالي؟

274
00:19:21,795 --> 00:19:23,965
في أي وقت يتغير طبقي،

275
00:19:23,965 --> 00:19:27,630
يجب أن أكون قادراً على بدء مكالمة لهذا.

276
00:19:27,630 --> 00:19:30,590
الآن، أين يمكنني تغيير قيمة الطبق الخاص بي؟

277
00:19:30,590 --> 00:19:34,365
وبالنظر إلى الوراء في الاشتراك هنا،

278
00:19:34,365 --> 00:19:35,905
لاحظ أن هناك حق،

279
00:19:35,905 --> 00:19:40,180
كنت تغيير الطبق الخاص بك في كل مرة أن تتغير المعلمة لدينا.

280
00:19:40,180 --> 00:19:42,035
لذلك، في هذه المرحلة،

281
00:19:42,035 --> 00:19:45,495
أريد إعادة تعيين القيمة السابقة والتالية.

282
00:19:45,495 --> 00:19:51,940
لذلك، أنا ذاهب لتغيير هذا إلى كتلة من التعليمات البرمجية هنا.

283
00:19:51,940 --> 00:19:57,250
ثم، أود أن أقول هذا سيتبرينكست،

284
00:19:57,250 --> 00:20:02,170
ومن ثم سيتم ديشيد المعلمة.

285
00:20:04,370 --> 00:20:07,970
هذا هو. لذلك، مع هذا التغيير،

286
00:20:07,970 --> 00:20:11,155
ما يحدث هو في كل مرة يتم تحديث طبق بلدي،

287
00:20:11,155 --> 00:20:17,085
وسوف تحديث السابقة والقادمة أيضا في المقابل من هنا.

288
00:20:17,085 --> 00:20:19,605
لذلك، مع هذا التغيير قليلا،

289
00:20:19,605 --> 00:20:23,150
بلدي ديسد سيكون الطبق الحالي.

290
00:20:23,150 --> 00:20:25,530
السابقة سوف تشير إلى الطبق السابق،

291
00:20:25,530 --> 00:20:28,690
وسيتم الإشارة إلى التالي إلى DISHID المقبل.

292
00:20:28,690 --> 00:20:31,565
لذا، لدي كل الثلاثة التي أحتاجها

293
00:20:31,565 --> 00:20:37,460
الآن، يمكنني الاستفادة من هذه القيم الثلاث من أجل تنفيذ طريقة التنقل

294
00:20:37,460 --> 00:20:43,325
بين الأطباق في القالب الخاص بي من خلال تضمين اثنين من الأزرار في القالب الخاص بي.

295
00:20:43,325 --> 00:20:48,775
لذلك، دعونا نذهب إلى قالب مكونات dishdetaille،

296
00:20:48,775 --> 00:20:53,569
ومن ثم تضمين اثنين من الأزرار التي تمكني من التنقل بين الأطباق.

297
00:20:53,569 --> 00:20:58,535
الذهاب إلى مكون تفاصيل الطبق بينما أنا هنا،

298
00:20:58,535 --> 00:21:06,150
اسمحوا لي أن تأخذ هذا NGiF من هذه البطاقة ومن ثم نقله إلى div هناك.

299
00:21:06,150 --> 00:21:08,445
أريد إخفاء div بأكمله،

300
00:21:08,445 --> 00:21:10,850
عندما لا يكون طبقي حاليًا معيبًا،

301
00:21:10,850 --> 00:21:13,515
وبالمثل للتعليقات أيضًا.

302
00:21:13,515 --> 00:21:16,440
أجد هذا أن يكون قليلا

303
00:21:16,440 --> 00:21:19,700
متخبط عندما يتم جلب معلومات طبق بلدي من الخادم.

304
00:21:19,700 --> 00:21:24,945
لذلك، سأقوم بإجراء هذا التغيير لكل من divs أن

305
00:21:24,945 --> 00:21:32,810
أحدهما يعرض التعليقات والآخر يعرض تفاصيل الطبق في البطاقة.

306
00:21:32,810 --> 00:21:35,170
مع هذين التحديثين،

307
00:21:35,170 --> 00:21:37,210
داخل إجراءات بطاقتي،

308
00:21:37,210 --> 00:21:38,605
سأقوم بتضمين

309
00:21:38,605 --> 00:21:49,165
زر واحد آخر من نوع الزر بوضوح وهذا الزر،

310
00:21:49,165 --> 00:21:55,165
وسوف أقوم بتضمين RouterLink.

311
00:21:55,165 --> 00:21:57,320
في اللحظة التي ترى فيها رابط جهاز التوجيه،

312
00:21:57,320 --> 00:21:58,775
تقول على الفور، «أوه،

313
00:21:58,775 --> 00:22:00,620
أنا أعرف ما تحاول القيام به.

314
00:22:00,620 --> 00:22:04,890
أنت تحاول تحويل هذا الزر حتى تتمكن من التنقل بين

315
00:22:04,890 --> 00:22:11,720
المكونات المختلفة داخل خدمتي.»

316
00:22:11,720 --> 00:22:14,000
لذلك، بالنسبة

317
00:22:14,000 --> 00:22:22,870
إلى RouterLink، سأقوم بتوفير مجموعة من القيم ومجموعة القيم الخاصة بـ RouterLink،

318
00:22:22,870 --> 00:22:27,135
سأقوم بعمل dishdetaille.

319
00:22:27,135 --> 00:22:30,665
أيضا، الجزء الثاني.

320
00:22:30,665 --> 00:22:33,330
أترى، هذا هو الجزء المثير للاهتمام.

321
00:22:33,330 --> 00:22:37,125
الجزء الثاني من هذه الصفيف سيكون مسبقًا،

322
00:22:37,125 --> 00:22:43,090
وهو المتغير الذي أعلنته في المكون الخاص بي.

323
00:22:43,090 --> 00:22:52,905
لذلك، مع هذا، سيصبح هذا الزر رابطًا للطبق السابق في قائمة الأطباق الخاصة بي.

324
00:22:52,905 --> 00:22:55,615
( سبيفي)، صحيح؟

325
00:22:55,615 --> 00:23:01,010
لذا، مع ذلك، ماذا أيضاً؟

326
00:23:02,010 --> 00:23:07,550
اسمحوا لي إغلاق قبالة زر هنا ومن ثم داخل زر,

327
00:23:07,550 --> 00:23:16,890
أنا ذاهب الى استخدام الخط رهيبة رمز

328
00:23:22,360 --> 00:23:26,550
اتحاد كرة القدم شيفرون اليسار.

329
00:23:32,670 --> 00:23:37,935
لذا، هذا هو. سيكون هذا الزر زر مع رمز هناك.

330
00:23:37,935 --> 00:23:40,605
لذلك، الآن لدينا زر واحد هنا،

331
00:23:40,605 --> 00:23:43,465
وأنا ذاهب أيضا لتشمل زر آخر هنا.

332
00:23:43,465 --> 00:23:44,880
قبل أن أقوم بتضمين الزر،

333
00:23:44,880 --> 00:23:50,330
سأفعل امتداد الطبقة المرنة،

334
00:23:50,330 --> 00:23:55,210
رأيت لي باستخدام الفاصل المرن في واحدة من التدريبات السابقة.

335
00:23:55,210 --> 00:23:56,855
لذلك، ترى ما أفعله،

336
00:23:56,855 --> 00:24:00,695
أنا تمتد لتشمل الزر الثاني.

337
00:24:00,695 --> 00:24:02,270
لذلك، بالنسبة للزر الثاني،

338
00:24:02,270 --> 00:24:05,040
سأقوم فقط بنسخ هذا

339
00:24:06,780 --> 00:24:13,190
ثم لصقه هناك ثم قم بتحديث هذا واحد ليقول السابق.

340
00:24:13,190 --> 00:24:16,730
بدلا من السابق، وسوف أذهب المقبل ثم

341
00:24:16,730 --> 00:24:23,335
فا شيفرون اليسار إلى فا شيفرون اليمين, وهذا كل شيء.

342
00:24:23,335 --> 00:24:28,049
دعونا حفظ التغييرات على مكونات تفاصيل طبق لدينا،

343
00:24:28,049 --> 00:24:30,760
وأيضا الملفات المتبقية.

344
00:24:30,760 --> 00:24:35,340
بعد هذا التحديث، دعنا نذهب وتحقق من ما يفعله تطبيقنا.

345
00:24:35,340 --> 00:24:38,065
الذهاب إلى طلبي في المتصفح،

346
00:24:38,065 --> 00:24:40,500
دعونا نذهب إلى مكون القائمة.

347
00:24:40,500 --> 00:24:46,240
نرى القائمة ودعونا نختار عنصرًا واحدًا من القائمة هنا.

348
00:24:46,240 --> 00:24:53,270
لذلك، لاحظ أنه الآن يتم عرض هذا العنصر من طبق القائمة هنا.

349
00:24:53,270 --> 00:24:55,225
لاحظ في الأسفل،

350
00:24:55,225 --> 00:24:58,835
لدينا زرين هنا، اليسار واليمين.

351
00:24:58,835 --> 00:25:01,440
عندما نضغط على الزر الأيسر،

352
00:25:01,440 --> 00:25:08,875
لاحظ كيف يمكننا الانتقال إلى الطبق السابق في قائمة الأطباق.

353
00:25:08,875 --> 00:25:15,515
يمكنني الاستمرار في العمل اليسار مرة أخرى والاستمرار في التنقل إلى اليسار واليمين.

354
00:25:15,515 --> 00:25:17,980
لاحظ أنه عندما أفعل ذلك،

355
00:25:17,980 --> 00:25:22,655
لا يتم إعادة تحميل وجهة نظري الفعلية،

356
00:25:22,655 --> 00:25:25,190
بدلا من ذلك أنا ذاهب فقط في جلب

357
00:25:25,190 --> 00:25:34,955
البيانات المتعلقة بالأطباق من الخدمة ثم تحديث وجهة نظري هنا.

358
00:25:34,955 --> 00:25:38,350
السبب في أننا قادرون على القيام بذلك هو

359
00:25:38,350 --> 00:25:43,445
أن لدينا الملاحظة، المعلمات يمكن ملاحظتها.

360
00:25:43,445 --> 00:25:45,890
لذلك، في أي وقت أنقر على هذين،

361
00:25:45,890 --> 00:25:48,860
اليسار واليمين، المعلمات يمكن ملاحظتها،

362
00:25:48,860 --> 00:25:56,620
لاحظ كيف في هذه اللحظة يظهر العنوان dishdetaille صفر.

363
00:25:56,620 --> 00:25:58,315
إذا قمت بالنقر فوق اليمين،

364
00:25:58,315 --> 00:26:02,925
فسيتم تحديث ذلك من dishdetail صفر إلى dishdetail واحد.

365
00:26:02,925 --> 00:26:07,560
هذا تغيير المعلمة، وهذا سوف يسبب بلدي يمكن ملاحظته

366
00:26:07,560 --> 00:26:12,245
للذهاب وجلب طبق جديد من خدمة الطبق.

367
00:26:12,245 --> 00:26:14,980
ثم، يتم جلب الطبق الجديد، يتم تحديث

368
00:26:14,980 --> 00:26:20,285
متغير الطبق في المكون الخاص بي،

369
00:26:20,285 --> 00:26:21,885
وعندما يتم تحديث ذلك، يتم تحديث

370
00:26:21,885 --> 00:26:23,640
وجهة نظري أيضًا.

371
00:26:23,640 --> 00:26:28,185
لذا، لاحظ أنني أستخدم نفس العرض،

372
00:26:28,185 --> 00:26:36,440
فأنا قادر على التنقل بين الأطباق المختلفة التي هي جزء من قائمة الأطباق الخاصة بي.

373
00:26:36,440 --> 00:26:42,470
هذا هو الجزء المثير للاهتمام الذي يمكنك الحصول عليه باستخدام المعلمات التي يمكن

374
00:26:42,470 --> 00:26:49,250
ملاحظتها من activator.service داخل تطبيق Angular الخاص بك.

375
00:26:49,250 --> 00:26:56,355
طريقة مثيرة للاهتمام للاستفادة من فواتير الملاحظة لدينا تطبيق الزاوي.

376
00:26:56,355 --> 00:26:59,640
وبطبيعة الحال، فإن الطريقة التي نفذت ذلك،

377
00:26:59,640 --> 00:27:03,210
فعلت ذلك قليلا من طريقة مفتعلة لفعل الأشياء.

378
00:27:03,210 --> 00:27:07,965
كان لا بد لي من الحصول على عقد من قائمة بطاقات الهوية الطبق.

379
00:27:07,965 --> 00:27:12,760
اضطررت إلى تعديل السابقة والقادمة وهلم جرا.

380
00:27:12,760 --> 00:27:16,360
إذا كان لديك طريقة للحصول على

381
00:27:16,360 --> 00:27:20,000
القيمة السابقة والتالية تلقائيًا من خدمتك،

382
00:27:20,000 --> 00:27:22,015
كلما قمت بجلب طبق،

383
00:27:22,015 --> 00:27:26,895
فإن تنفيذ النتيجة سيصبح أسهل قليلاً.

384
00:27:26,895 --> 00:27:28,705
الآن ليس لدينا ذلك

385
00:27:28,705 --> 00:27:33,430
لذلك، عملت حول المشكلة لأنني أردت فقط توضيح طريقة

386
00:27:33,430 --> 00:27:38,855
استخدام ملاحظة مثل هذا داخل تطبيق Angular الخاص بك.

387
00:27:38,855 --> 00:27:43,270
إذا استطعنا تنفيذ الخدمة التي ستعود

388
00:27:43,270 --> 00:27:47,320
القيمة السابقة والتالية كلما جلبنا طبق،

389
00:27:47,320 --> 00:27:53,640
فإن كل هذا الصداع سيكون أكثر بساطة حلها.

390
00:27:53,640 --> 00:27:58,810
دعونا نؤجل هذه الفكرة إلى مرحلة لاحقة.

391
00:27:58,810 --> 00:28:01,930
ولكن في الوقت الحالي، ترى كيف

392
00:28:01,930 --> 00:28:05,250
نستخدم المعلمات التي يمكن ملاحظتها من أجل تنفيذ

393
00:28:05,250 --> 00:28:12,605
طريقة مثيرة للاهتمام لدعم ميزة جديدة داخل تطبيق Angular الخاص بنا.

394
00:28:12,605 --> 00:28:16,325
و هذا يكمل هذا التمرين.

395
00:28:16,325 --> 00:28:24,000
هذا هو الوقت المناسب بالنسبة لك للقيام git الالتزام مع الرسالة RXJS الجزء الثاني.