1
00:00:03,680 --> 00:00:07,095
دعونا الآن نواصل العمل

2
00:00:07,095 --> 00:00:12,080
على تطبيق صفحة واحدة الذي قمنا بتطويره في تدريباتنا.

3
00:00:12,080 --> 00:00:16,480
حتى الآن، قمنا بدمج مكون المنزل،

4
00:00:16,480 --> 00:00:23,610
مكون القائمة، ومكون الاتصال في تطبيق صفحة واحدة لدينا.

5
00:00:23,610 --> 00:00:29,080
يتم استخدام مكون تفاصيل الطبق حاليًا في الجزء السفلي من مكون القائمة.

6
00:00:29,080 --> 00:00:32,020
لذلك، عند النقر على أي من العناصر في

7
00:00:32,020 --> 00:00:35,450
القائمة، يتم عرض تفاصيل الطبق أدناه في القائمة.

8
00:00:35,450 --> 00:00:40,290
الآن، سنستفيد من دعم آخر تقدمه وحدة التوجيه Angular،

9
00:00:40,290 --> 00:00:47,820
والذي يمكننا من تحديد مسار بمعلمة مضمنة في تعريف المسار.

10
00:00:47,820 --> 00:00:52,520
بهذه الطريقة، يمكننا تمرير المعلومات إلى مكون آخر،

11
00:00:52,520 --> 00:00:53,880
ومن ثم من هناك،

12
00:00:53,880 --> 00:00:56,175
عرض المعلومات في المكون الآخر.

13
00:00:56,175 --> 00:00:57,770
كيف يعمل هذا؟

14
00:00:57,770 --> 00:01:01,770
دعونا نتعلم ذلك من خلال القيام بهذا التمرين.

15
00:01:01,770 --> 00:01:04,755
لذلك، والعودة إلى طلبنا،

16
00:01:04,755 --> 00:01:08,140
في هذا التطبيق، عندما تنظر إلى القائمة،

17
00:01:08,140 --> 00:01:10,205
عند النقر على أي عنصر في القائمة،

18
00:01:10,205 --> 00:01:15,920
يتم عرض تفاصيل العنصر المحدد أدناه في القائمة.

19
00:01:15,920 --> 00:01:19,940
الآن، أود أن فصل وجهة نظر تفاصيل

20
00:01:19,940 --> 00:01:24,795
هذا الطبق معين في وجهة نظر منفصلة خاصة بها.

21
00:01:24,795 --> 00:01:27,235
عندما أنقر على أي واحد من هذه،

22
00:01:27,235 --> 00:01:30,360
أريد أن أكون قادرا على عرض تفاصيل الطبق،

23
00:01:30,360 --> 00:01:34,780
وتحديدا في وجهة نظر في هذا التطبيق.

24
00:01:34,780 --> 00:01:39,235
ولتحقيق ذلك، سنستفيد، كما قلت،

25
00:01:39,235 --> 00:01:43,985
بمعلمات الطريق

26
00:01:43,985 --> 00:01:48,220
لتمكيننا من دعم هذا النوع من السلوك في تطبيقنا.

27
00:01:48,220 --> 00:01:50,050
كيف يمكننا فعل ذلك؟

28
00:01:50,050 --> 00:01:57,025
دعونا نفعل ذلك عن طريق البدء بتحديد مسار جديد بمعلمة هنا.

29
00:01:57,025 --> 00:02:00,305
للاستفادة من مكون تفاصيل الطبق،

30
00:02:00,305 --> 00:02:02,455
سوف نذهب إلى الطرق،

31
00:02:02,455 --> 00:02:06,850
ومن ثم تحديد مسار جديد بعد القائمة هنا.

32
00:02:06,850 --> 00:02:10,010
انظر إلى الطريقة التي يتم بها تعريف الطريق هنا.

33
00:02:10,010 --> 00:02:16,595
لذا، هذا هو المسار، dishdetaille.

34
00:02:16,595 --> 00:02:20,225
لذا، فإن تفاصيل الطبق هذه جزء من مكون تفاصيل الطبق.

35
00:02:20,225 --> 00:02:22,190
لذلك، لديها وجهة نظر خاصة بها.

36
00:02:22,190 --> 00:02:25,330
الآن، أريد أن أكون قادرا على الانتقال إلى هذا العرض،

37
00:02:25,330 --> 00:02:27,890
ولكن مع معرف المعلمة،

38
00:02:27,890 --> 00:02:33,750
لأن عرض تفاصيل الطبق هذا قد يعرض أي واحد من الأطباق في القائمة الخاصة بي.

39
00:02:33,750 --> 00:02:38,790
لذلك، أريد أن أكون قادرًا على عرض طبق محدد في تفاصيل الطبق.

40
00:02:38,790 --> 00:02:40,710
الآن، هذا الطبق المحدد سيكون له هوية،

41
00:02:40,710 --> 00:02:45,879
وأريد أن تمرير هذا الهوية إلى بلدي مكونات مفصلة طبق،

42
00:02:45,879 --> 00:02:50,025
بحيث يمكن أن تقدم تفاصيل ذلك الطبق معين.

43
00:02:50,025 --> 00:02:53,480
لذلك، في جهاز التوجيه Angular،

44
00:02:53,480 --> 00:02:59,150
فإنه يدعم تمرير المعلمات عن طريق تحديد معلمات المسار مثل هذا،

45
00:02:59,150 --> 00:03:02,220
في تعريف جهاز التوجيه نفسه.

46
00:03:02,220 --> 00:03:03,260
لذلك، داخل المسار،

47
00:03:03,260 --> 00:03:04,525
إذا قلت القولون،

48
00:03:04,525 --> 00:03:10,050
بحيث القولون يمكن أن يتبع اسم الذي سيكون بمثابة معلمة الطريق.

49
00:03:10,050 --> 00:03:14,650
لذلك، في هذه الحالة، سأستخدم اسم المعلمة كمعرف.

50
00:03:14,650 --> 00:03:21,165
يشير هذا المعرف إلى معرف الطبق الذي قدمناه بالفعل لكل من أطباقنا.

51
00:03:21,165 --> 00:03:27,055
الآن، هذا سوف يأخذني إلى عنصر تفاصيل الطبق.

52
00:03:27,055 --> 00:03:35,040
لذلك، سنضيف في هذا الطريق الجديد إلى تعريف الطريق الزاوي لدينا هنا.

53
00:03:35,040 --> 00:03:36,565
احفظ التغييرات.

54
00:03:36,565 --> 00:03:39,960
الآن، في مكون القائمة،

55
00:03:39,960 --> 00:03:45,805
لذلك عندما أفتح ملف قالب مكونات

56
00:03:45,805 --> 00:03:47,470
القائمة، في مكون القائمة،

57
00:03:47,470 --> 00:03:50,350
أقوم بعرض الطبق في الأسفل هنا.

58
00:03:50,350 --> 00:03:51,625
لذلك، أنا لا أريد أن أفعل ذلك.

59
00:03:51,625 --> 00:03:57,335
لذلك، سأقوم بحذف هذا الجزء من قالب مكونات القائمة الخاص بي.

60
00:03:57,335 --> 00:04:01,630
بدلا من ذلك، ما أدركه هو أن هناك،

61
00:04:01,630 --> 00:04:05,015
وأنا قادرة على الوصول إلى طبق معين.

62
00:04:05,015 --> 00:04:07,680
لذلك، عندما يتم النقر على الطبق،

63
00:04:07,680 --> 00:04:10,080
بدلا من القيام بذلك انقر هنا،

64
00:04:10,080 --> 00:04:13,490
لذلك أنا ذاهب لإزالة هذه النقر هنا، وبدلا من ذلك،

65
00:04:13,490 --> 00:04:23,940
أنا ذاهب لتحديد معلمة جديدة هنا تسمى RouterLink.

66
00:04:25,790 --> 00:04:30,710
سترى استخدام جهاز التوجيه (routerLink) هنا.

67
00:04:30,710 --> 00:04:37,460
الآن، يأخذ هذا RouterLink في القيم التي يمكنك توفيرها في القالب الخاص بك مثل هذا.

68
00:04:37,460 --> 00:04:42,190
لذلك، يمكنك توفير ذلك كمصفوفة هنا.

69
00:04:42,190 --> 00:04:49,550
داخل الصفيف، يمكنك توفير جزأين من صفيف.

70
00:04:49,550 --> 00:04:51,195
لذا، تفاصيل الصحون

71
00:04:51,195 --> 00:04:55,360
لذلك، رأيت أنه عندما حددت الطريق، قلت «/dishdetail/: id».

72
00:04:56,560 --> 00:05:03,320
لذا، سيمر جهاز التوجيه Angular في أي معلمة أقوم بتوفيرها

73
00:05:03,320 --> 00:05:09,340
هنا كجزء من الجزء الثاني من عنوان URL هذا هناك.

74
00:05:09,340 --> 00:05:11,700
لذلك، الآن، جنبا إلى جنب مع تفاصيل الطبق،

75
00:05:11,700 --> 00:05:15,820
وأنا ذاهب لبناء بلدي روترلينك باستخدام تفاصيل الطبق،

76
00:05:15,820 --> 00:05:19,165
وأيضا معرف الطبق هنا.

77
00:05:19,165 --> 00:05:22,580
لذا، يشير هذا الطبق إلى الطبق

78
00:05:22,580 --> 00:05:26,710
المحدد الذي اخترته من مجموعة الأطباق هنا.

79
00:05:26,710 --> 00:05:27,950
لذا، بطاقة هوية الطبق،

80
00:05:27,950 --> 00:05:29,830
لدي إمكانية الوصول إليها هنا.

81
00:05:29,830 --> 00:05:38,120
لذلك، سأستخدم ذلك كالجزء الثاني داخل هذه المجموعة من المعلمات،

82
00:05:38,120 --> 00:05:41,025
التي سأنتقل إليها لبرنامجي RouterLink هنا.

83
00:05:41,025 --> 00:05:42,970
لذا، إذا قمت بتعريفه على هذا النحو،

84
00:05:42,970 --> 00:05:48,270
فعند النقر على هذا العنصر المعين في قائمتي،

85
00:05:48,270 --> 00:05:53,385
فإن ذلك المفصل،

86
00:05:53,385 --> 00:05:55,285
سيتم تمرير معرف الطبق، مع هذا dishdetaille، كرابط جهاز التوجيه.

87
00:05:55,285 --> 00:05:59,765
لذا، ستصبح هذه المعلومات متاحة الآن من خلال

88
00:05:59,765 --> 00:06:04,600
أجهزة التوجيه Angular الخاصة بي إلى مكونات تفاصيل الطبق الخاصة بي.

89
00:06:04,600 --> 00:06:09,850
لذلك، يقوم جهاز التوجيه بتمكين مكون تفاصيل الطبق لاسترداد هذه القيمة،

90
00:06:09,850 --> 00:06:15,060
معرف الطبق، من المسار الزاوي عند تمرير هذه المعلومات إليه.

91
00:06:15,060 --> 00:06:16,880
كيف نفعل ذلك؟ لذلك،

92
00:06:16,880 --> 00:06:22,670
نحن بحاجة للذهاب إلى مكون تفاصيل الطبق وإصلاح ذلك حتى لتلقي هذه المعلومات.

93
00:06:22,670 --> 00:06:27,945
لذلك، بعد إجراء هذه التغييرات على مكون القائمة،

94
00:06:27,945 --> 00:06:34,090
دعونا الآن التحول إلى مكون تفاصيل الطبق.

95
00:06:34,300 --> 00:06:37,610
داخل مكون تفاصيل الطبق،

96
00:06:37,610 --> 00:06:39,950
ترى أنه في الوقت الحالي،

97
00:06:39,950 --> 00:06:43,670
كنت أتلقى الطبق كمدخل هنا.

98
00:06:43,670 --> 00:06:46,655
أنا لم يعد ذاهب لتلقي الأطباق والمدخلات.

99
00:06:46,655 --> 00:06:50,295
لذلك، سأترك ذلك على هذا

100
00:06:50,295 --> 00:06:51,910
النحو، ببساطة طبق.

101
00:06:51,910 --> 00:06:58,220
لم أعد بحاجة إلى المدخلات لأنني لا تمر في هذه المعلومات باستخدام الطبق،

102
00:06:58,220 --> 00:07:01,625
داخل أقواس مربعة التي قمت بتضمينها في مكون القائمة الخاص بي.

103
00:07:01,625 --> 00:07:07,550
بدلاً من ذلك، هذه المعلومات حول الأطباق المحددة القادمة من خلال جهاز التوجيه Angular.

104
00:07:07,550 --> 00:07:11,595
كيف يمكنني الوصول إلى بطاقة هوية الطبق تلك؟

105
00:07:11,595 --> 00:07:13,050
لذا، لفعل ذلك،

106
00:07:13,050 --> 00:07:14,870
أذهب إلى هنا

107
00:07:14,870 --> 00:07:24,720
في هذا التطبيق، وأنا ذاهب لإضافة في اثنين من الواردات أكثر هنا،

108
00:07:24,720 --> 00:07:27,480
واحد منهم يسمى بارامز.

109
00:07:27,480 --> 00:07:30,560
لذا، هذا Params يعطيني الوصول

110
00:07:30,560 --> 00:07:35,315
إلى معلمات جهاز التوجيه المتوفرة عندما أدخل.

111
00:07:35,315 --> 00:07:42,855
لذلك، هذا هو من جهاز التوجيه الزاوي، بارامز،

112
00:07:42,855 --> 00:07:51,510
وأيضا واحد آخر أن أحتاج هو الموقع.

113
00:07:51,510 --> 00:07:57,710
يتيح لي الموقع تتبع موقع

114
00:07:57,710 --> 00:08:04,060
صفحتي في تاريخ المتصفح الخاص بي.

115
00:08:04,060 --> 00:08:11,185
لذلك، سيكون ذلك مفيدًا بالنسبة لي للتنقل مرة أخرى من تفاصيل الطبق الخاص بي عندما أحتاج إلى ذلك.

116
00:08:11,185 --> 00:08:14,440
سوف تراني أستعمل هذا بعد قليل

117
00:08:14,440 --> 00:08:19,255
لذا، شيئين أحتاج إلى استيرادهما: Params والموقع.

118
00:08:19,255 --> 00:08:23,799
سنرى كيف نستفيد من هذين في طلبنا.

119
00:08:23,799 --> 00:08:25,430
لذلك، جنبا إلى جنب مع هذا،

120
00:08:25,430 --> 00:08:29,420
سوف ندخل وهنا، لمنشئ،

121
00:08:29,420 --> 00:08:39,320
والآن نلاحظ أن قيمة الطبق ليست متاحة الآن من عنصر القائمة بلدي.

122
00:08:39,320 --> 00:08:43,650
ولكن بدلا من ذلك، لا بد لي من الذهاب صراحة وجلب هذا من ديشسرفيس.

123
00:08:43,650 --> 00:08:45,405
لذلك، أنا ذاهب لاستيراد

124
00:08:45,405 --> 00:08:56,020
ديشسرفيس أيضا إلى بلدي عنصر التفاصيل طبق.

125
00:09:01,330 --> 00:09:03,960
خدمة الصحون هنا

126
00:09:03,960 --> 00:09:09,820
لذلك، هذا سيمكنني من الذهاب وجلب طبق معين من خدمة الأطباق.

127
00:09:09,820 --> 00:09:11,930
لذلك، تذكر أن لدينا بالفعل

128
00:09:11,930 --> 00:09:15,855
طريقة GetDish وخدمة الطبق التي يمكننا استخدامها.

129
00:09:15,855 --> 00:09:20,320
الآن، الشيء التالي المهم بالنسبة لنا هو الحصول على

130
00:09:20,320 --> 00:09:22,800
عقد من معرف الطبق. الآن

131
00:09:22,800 --> 00:09:25,665
، كيف يمكننا الحصول على معرف الطبق.

132
00:09:25,665 --> 00:09:29,075
الآن، أنا بحاجة لجعل كل هذه الخدمات متاحة،

133
00:09:29,075 --> 00:09:31,230
لذلك سأقول خدمة طبق.

134
00:09:31,230 --> 00:09:46,250
ثم، والآخر هو الموقع.

135
00:09:46,270 --> 00:09:51,275
لذلك، الموقع هو خدمة أخرى متاحة لي.

136
00:09:51,275 --> 00:09:56,010
لذلك، سيتم استخدام كل من هذه داخل طلبي.

137
00:09:56,010 --> 00:09:59,325
لذلك، عندما يتم تهيئة هذا المكون الطبق،

138
00:09:59,325 --> 00:10:01,890
ثم في هذه المرحلة في ngonInit،

139
00:10:01,890 --> 00:10:08,490
يمكنني الذهاب وجلب المعلومات حول طبق معين من Params.

140
00:10:08,490 --> 00:10:13,120
إذاً، كيف نفعل ذلك؟ لذلك، نحن نترك الهوية

141
00:10:13,120 --> 00:10:15,800
، لذا، هذا هو المكان الذي سأجلب فيه الهوية،

142
00:10:15,800 --> 00:10:19,370
لذا أود أن أقول بالإضافة إلى هذا.

143
00:10:19,370 --> 00:10:23,760
أيضا لجلب قيمة المسار،

144
00:10:23,760 --> 00:10:30,565
أحتاج إلى حقن خدمة أخرى تسمى خدمة ActivatedRoute.

145
00:10:30,565 --> 00:10:32,740
هذا جزء من أجهزة التوجيه الزاوي.

146
00:10:32,740 --> 00:10:39,970
لذلك توفر لي خدمة ActivatedRoute هذه الوصول إلى الطريق هنا.

147
00:10:39,970 --> 00:10:41,940
لذلك، أود أن أقول،

148
00:10:41,940 --> 00:10:47,770
لذلك جنبا إلى جنب مع ديشسرفيس أنا أيضا بحاجة إلى تحديد واحد آخر يسمى

149
00:10:47,770 --> 00:10:54,305
كالطريق الذي سيكون خدمة أكتيفاتدروتي هنا.

150
00:10:54,305 --> 00:10:56,890
لذا، كل هؤلاء الثلاثة سيكونون متاحين لي

151
00:10:56,890 --> 00:11:00,265
لذا هناك، يمكنني أن أسأل عن

152
00:11:00,265 --> 00:11:10,840
هذا الطريق، لقطة، بارامز.

153
00:11:10,840 --> 00:11:18,500
هذه Params هي مصفوفة

154
00:11:18,500 --> 00:11:25,760
يمكنني فهرستها باستخدام المعرف كقيمة، لذلك معرف Params،

155
00:11:25,760 --> 00:11:30,340
وهذا يجلب لي المعرف من المعلمة.

156
00:11:30,340 --> 00:11:34,750
لذلك، عندما أقوم بتعريف عنوان URL هذا،

157
00:11:34,750 --> 00:11:41,070
سيتم تعريف عنوان URL لهذا بأنه Dishdetaille.

158
00:11:41,070 --> 00:11:43,320
على سبيل المثال، DishDetaille 0،

159
00:11:43,320 --> 00:11:47,760
DishDetaille 1، DishDetaille 2

160
00:11:47,760 --> 00:11:54,060
لذلك، هذه هي الطريقة التي سيتم تعريف عناوين URL لهذه المكونات هناك.

161
00:11:54,060 --> 00:11:56,520
لذا، تلك القيمة التي سأحضرها إلى هنا

162
00:11:56,520 --> 00:11:59,950
الآن، مرة واحدة أحصل على عقد من فكرة الطبق، ثم أستطيع أن أقول،

163
00:11:59,950 --> 00:12:08,125
هذا الطبق يساوي ديشسرفيس

164
00:12:08,125 --> 00:12:17,915
والحصول على طبق و جيتديش سوف تأخذ معرف كمعلمة هنا.

165
00:12:17,915 --> 00:12:22,825
لذلك، مع هذا، عندما أنقر على طبق في مكون القائمة الخاص بي، فإن

166
00:12:22,825 --> 00:12:26,410
هذا الرابط الذي لدي رابط جهاز التوجيه الذي قمت بإعداده هناك،

167
00:12:26,410 --> 00:12:31,770
سيمر في معرف الطبق إلى جهاز التوجيه الخاص بي كـ RouterParameter،

168
00:12:31,770 --> 00:12:34,525
والتي ستصبح متاحة لي في

169
00:12:34,525 --> 00:12:40,380
مكون DishDetail الخاص بي عن طريق الوصول إلى خدمة ActivatedRoute هنا.

170
00:12:40,380 --> 00:12:42,515
لذلك، بمجرد الحصول على عقد من ذلك،

171
00:12:42,515 --> 00:12:46,820
ثم يمكنني استخدام هذه القيمة للاستعلام عن الطبق هنا.

172
00:12:46,820 --> 00:12:50,630
الآن، هذه ليست الطريقة الكاملة للقيام بالأمور.

173
00:12:50,630 --> 00:12:53,080
في وقت لاحق في الوحدة التالية،

174
00:12:53,080 --> 00:12:56,120
سنستخدم شيئًا يسمى JavaScript التفاعلي.

175
00:12:56,120 --> 00:12:59,640
ثم، عند هذه النقطة، سأعود لإعادة تعريف هذا

176
00:12:59,640 --> 00:13:04,870
بطريقة مختلفة بحيث يمكن لمكون DishDetail الخاص بي تتبع

177
00:13:04,870 --> 00:13:09,120
أي تغييرات أجريها على عنوان URL الخاص بي

178
00:13:09,120 --> 00:13:14,515
وتغيير المعلومات التي يتم عرضها بواسطة هذا المكون تلقائيًا.

179
00:13:14,515 --> 00:13:19,445
سنأتي إلى ذلك في واحدة من التدريبات اللاحقة في الوحدة التالية،

180
00:13:19,445 --> 00:13:23,890
ولكن هذا يعمل بشكل جيد في الوقت الحالي لذلك نحن ذاهبون لاستخدام هذا.

181
00:13:23,890 --> 00:13:27,070
بالإضافة إلى ذلك، الآن عندما أذهب إلى تفاصيل الطبق

182
00:13:27,070 --> 00:13:30,335
أريد أن أكون قادرا على العودة إلى القائمة من الطبق.

183
00:13:30,335 --> 00:13:36,135
لذلك، أنا ذاهب لإضافة في زر العودة إلى بطاقتي زر العودة إلى بطاقتي،

184
00:13:36,135 --> 00:13:41,905
والتي عند الضغط عليها سوف يأخذني مرة أخرى إلى الموقع السابق في المتصفح الخاص بي.

185
00:13:41,905 --> 00:13:48,230
لذلك، للقيام بذلك أنا ذاهب إلى إضافة في طريقة هنا تسمى غوباك،

186
00:13:50,020 --> 00:13:57,280
والتي سوف تفعل أساسا الاستفادة

187
00:13:57,280 --> 00:14:03,735
من خدمة الموقع التي قمت بتضمينها هنا.

188
00:14:03,735 --> 00:14:09,300
توفر خدمة الموقع طريقة تسمى «العودة» تسمح لي

189
00:14:09,300 --> 00:14:15,000
بالعودة إلى العنصر السابق في سجل المستعرض.

190
00:14:15,000 --> 00:14:19,890
لذلك، وبهذه الطريقة، سوف انتقل مرة أخرى إلى القائمة من التفاصيل هنا.

191
00:14:19,890 --> 00:14:22,430
لذلك، تتم إضافة طريقة GoBack هذه هنا.

192
00:14:22,430 --> 00:14:28,160
الآن، نحن بحاجة للذهاب وإصلاح مكون ديشديتايل هنا.

193
00:14:28,160 --> 00:14:32,390
لذلك، في ملف قالب مكونات DishDetail،

194
00:14:32,390 --> 00:14:36,950
هنا لدينا اثنين من الأزرار التي هي مثل وزر مشاركة.

195
00:14:36,950 --> 00:14:40,040
أنا ذاهب لإضافة في زر واحد أكثر هنا.

196
00:14:42,920 --> 00:14:47,155
لهذا الزر، أود أن أضيف في،

197
00:14:47,155 --> 00:14:49,220
إذا تم النقر على هذا الزر،

198
00:14:49,220 --> 00:14:55,330
وهذا سيؤدي إلى استدعاء إلى طريقة غوباك التي

199
00:14:55,330 --> 00:15:03,430
قمت بإضافتها للتو إلى بلدي dishDetail component.tsfile.

200
00:15:03,430 --> 00:15:10,555
لذلك، هذا سيكون زر العودة هناك.

201
00:15:10,555 --> 00:15:12,625
بينما نحن في ذلك،

202
00:15:12,625 --> 00:15:16,540
قد نقوم أيضًا بإصلاح روابط مكونات تذييل الصفحة أيضًا.

203
00:15:16,540 --> 00:15:22,645
لذلك، والذهاب إلى footercomponent.htmlfile في الجزء السفلي هنا حيث لدينا هذه الروابط،

204
00:15:22,645 --> 00:15:29,785
وأنا ذاهب لإضافة في RouterLink هنا مع

205
00:15:29,785 --> 00:15:38,110
المعلمة الرئيسية لأول واحد،

206
00:15:38,110 --> 00:15:47,390
ومن ثم القائمة للثانية،

207
00:15:51,240 --> 00:16:00,330
والاتصال بنا لثالث واحد في تذييل هنا.

208
00:16:00,330 --> 00:16:02,710
دعونا حفظ التغييرات.

209
00:16:02,710 --> 00:16:04,785
الذهاب إلى التطبيق الخاص بك،

210
00:16:04,785 --> 00:16:06,615
إذا قمت الآن بالنقر فوق القائمة،

211
00:16:06,615 --> 00:16:09,195
يتم عرض عناصر القائمة هنا.

212
00:16:09,195 --> 00:16:11,895
إذا نضغط على أي عنصر من عناصر القائمة،

213
00:16:11,895 --> 00:16:20,585
ستلاحظ أن تفاصيل الطبق تظهر في عرض منفصل هنا.

214
00:16:20,585 --> 00:16:22,900
هذه التفاصيل، كما ترون،

215
00:16:22,900 --> 00:16:26,450
وهذا هو بالضبط ما تم عرض مكون DishDetaille

216
00:16:26,450 --> 00:16:29,620
في وقت سابق، ولكن في الجزء السفلي من القائمة في مكون القائمة،

217
00:16:29,620 --> 00:16:33,260
لدينا الآن أن عرض في عرض منفصل.

218
00:16:33,260 --> 00:16:35,760
الآن، هذا المكون DishDetaille،

219
00:16:35,760 --> 00:16:39,290
الآن يمكنك العودة إلى القائمة عن طريق النقر على زر العودة.

220
00:16:39,290 --> 00:16:40,670
لذلك، عند النقر على زر رجوع،

221
00:16:40,670 --> 00:16:41,690
كنت مرة أخرى في القائمة.

222
00:16:41,690 --> 00:16:43,490
عند النقر على عنصر آخر،

223
00:16:43,490 --> 00:16:47,575
ترى أن تفاصيل هذا البند معين يتم عرضها هنا،

224
00:16:47,575 --> 00:16:51,560
وبالمثل بالنسبة للثالث أيضا وبعد ذلك يمكنك العودة.

225
00:16:51,560 --> 00:16:54,645
الآن، عند النقر على أي من هذه العناصر،

226
00:16:54,645 --> 00:17:02,780
لاحظ قيمة عنوان URL في شريط العناوين.

227
00:17:02,780 --> 00:17:08,565
لذا، هذا هو المضيف المحلي 4،200 شرطة مائلة DishDetail 0.

228
00:17:08,565 --> 00:17:12,080
هذا الصفر هو معرف هذا الطبق.

229
00:17:12,080 --> 00:17:14,630
لذا، يتم تمرير هذه القيمة،

230
00:17:14,630 --> 00:17:19,985
وهذه هي الطريقة التي يتم بها عرض مكون DishDetaille هنا، ارجع.

231
00:17:19,985 --> 00:17:21,540
عند النقر على العنصر الآخر،

232
00:17:21,540 --> 00:17:27,750
يمكنك أن ترى أنه الآن في عناوين URL يقول، DishDetail شرطة مائلة 1.

233
00:17:27,750 --> 00:17:29,750
وبالمثل، بالنسبة للرابع،

234
00:17:29,750 --> 00:17:33,390
تقول DishDetail شرطة مائلة 3، وهكذا.

235
00:17:33,390 --> 00:17:37,560
لذا، فإن قيمة المعلمة هذه هي التي تشير إلى

236
00:17:37,560 --> 00:17:41,210
مكون DishDetaille الذي

237
00:17:41,210 --> 00:17:44,235
يجب أن يظهر طبق معين بواسطة مكون DishDetaille.

238
00:17:44,235 --> 00:17:49,250
هذا هو ما يتم استخدامه من قبل مكون DishDetail لاسترداد المعلومات حول

239
00:17:49,250 --> 00:17:55,045
هذا الطبق المحدد من DishService باستخدام الأسلوب getDish،

240
00:17:55,045 --> 00:18:01,715
ومن ثم يتم عرض هذه المعلومات في طريقة عرض مكون DishDetail.

241
00:18:01,715 --> 00:18:03,675
لذلك، الآن في هذا التمرين،

242
00:18:03,675 --> 00:18:09,575
تعلمنا كيف يمكننا استخدام RouteParameters لتمرير المعلومات إلى مكون،

243
00:18:09,575 --> 00:18:14,804
ثم يحصل المكون على الوصول إلى المعلمة ثم يستخدم هذا RouteParameter

244
00:18:14,804 --> 00:18:18,320
لتحديد الطريقة

245
00:18:18,320 --> 00:18:22,850
التي يعرض بها العرض أو جلب المعلومات وتقديم العرض وفقًا لذلك .

246
00:18:22,850 --> 00:18:26,385
مع هذا، نكمل هذا التمرين.

247
00:18:26,385 --> 00:18:31,490
لقد انتهينا الآن تقريبًا من إنشاء تطبيق صفحة واحدة

248
00:18:31,490 --> 00:18:37,145
لتطبيق المطعم الذي كنا نعمل عليه حتى الآن.

249
00:18:37,145 --> 00:18:40,815
هذا هو الوقت المناسب بالنسبة لك للقيام git الالتزام مع الرسالة،

250
00:18:40,815 --> 00:18:44,060
جزء تطبيق الصفحة الواحدة 2.