1
00:00:00,000 --> 00:00:04,740
[MUSIC]

2
00:00:04,740 --> 00:00:09,772
باستخدام جهاز التوجيه الزاوي، تعلمنا بالفعل كيف يمكننا التنقل

3
00:00:09,772 --> 00:00:15,673
من عرض إلى آخر باستخدام توجيه ارتباط جهاز التوجيه لتحديد الرابط.

4
00:00:15,673 --> 00:00:21,823
وأيضا وحدة جهاز التوجيه، مما يتيح لنا مواصفات المسار،

5
00:00:21,823 --> 00:00:26,715
للانتقال إلى وجهات نظر المكونات المختلفة.

6
00:00:26,715 --> 00:00:31,265
الآن، دعونا نأخذ مثالا على مكون dishdetaille.

7
00:00:31,265 --> 00:00:36,680
حتى الآن، تم عمل مكون dishdetaille

8
00:00:36,680 --> 00:00:42,270
من خلال تلقي تفاصيل الطبق المحدد الذي يحتاج إلى عرضه من مكون القائمة.

9
00:00:42,270 --> 00:00:47,211
ولكن تم تسهيل ذلك لأن مكون dishdetaille

10
00:00:47,211 --> 00:00:49,290
يحتوي على خاصية كانت ترسل القيمة.

11
00:00:49,290 --> 00:00:52,201
ثم كنا نستخدم ديكور الإدخال

12
00:00:52,201 --> 00:00:57,027
للمتغير داخل مكون dishdetails للحصول على هذه القيمة التي

13
00:00:57,027 --> 00:01:00,800
تم تمريرها من مكون القائمة.

14
00:01:00,800 --> 00:01:06,120
الآن، عندما يتم توجيه هذه المكونات إلى استخدام جهاز توجيه،

15
00:01:06,120 --> 00:01:10,440
لم يعد هذا الاتصال بين المكونات موجودًا.

16
00:01:10,440 --> 00:01:13,995
لذلك نحن بحاجة إلى الاستفادة من جهاز التوجيه الزاوي لتكون قادرة على تمرير

17
00:01:13,995 --> 00:01:17,560
المعلومات من مكون واحد إلى المكون الآخر.

18
00:01:17,560 --> 00:01:22,140
وعادة ما يتم ذلك في شكل معلمات.

19
00:01:22,140 --> 00:01:25,940
المعلمات التي يمكن تحديدها إما كمعلمات المسار،

20
00:01:25,940 --> 00:01:29,600
ونحن سوف تتعلم قليلا في وقت لاحق، أو معلمات الاستعلام.

21
00:01:31,480 --> 00:01:34,320
لذلك بالنسبة إلى جهاز التوجيه الزاوي، ما تعلمناه حتى

22
00:01:34,320 --> 00:01:38,890
الآن هو أن المسارات كلها محددة كعنوان URL.

23
00:01:38,890 --> 00:01:43,532
لنفترض أن لديك حاجة لتمرير قيمة معلمة من مكون إلى

24
00:01:43,532 --> 00:01:44,980
مكون آخر.

25
00:01:44,980 --> 00:01:46,820
إذن كيف نفعل ذلك؟

26
00:01:46,820 --> 00:01:50,550
الآن، الطريقة الوحيدة للتواصل بين المكونات

27
00:01:50,550 --> 00:01:52,125
هي باستخدام رابط جهاز التوجيه.

28
00:01:52,125 --> 00:01:54,570
و/أو

29
00:01:54,570 --> 00:01:58,820
لاستخدام وحدة جهاز التوجيه للقيام بالتنقل من مكون إلى مكون آخر.

30
00:01:58,820 --> 00:02:06,370
الآن، هذا هو المكان الذي

31
00:02:06,370 --> 00:02:12,070
تمكننا فيه القدرة على تحديد قيم المعلمات داخل عنوان URL لمكون، مسار مكون، من تمرير هذه المعلومات.

32
00:02:12,070 --> 00:02:16,690
لذلك، على سبيل المثال، إذا أردنا أن نكون قادرين على عرض طبق

33
00:02:16,690 --> 00:02:20,450
مع معرف 42 في مكون ديستيل.

34
00:02:20,450 --> 00:02:25,680
إذا كان لدينا القدرة على تحديد شيء مثل/dishdetail/42.

35
00:02:25,680 --> 00:02:31,780
ثم دع dishdetails يلتقط الرقم 42 من عنوان URL مباشرة.

36
00:02:31,780 --> 00:02:37,000
ثم قمنا بتيسير آلية لنقل هذه المعلومات

37
00:02:37,000 --> 00:02:42,710
إلى مكون آخر عندما نتنقل إلى المكون الآخر.

38
00:02:42,710 --> 00:02:47,389
هذا هو ما يشار إليه في وحدة التوجيه الزاوي كمعلمة مسار.

39
00:02:48,560 --> 00:02:50,400
كيف تعمل معلمة المسار؟

40
00:02:50,400 --> 00:02:54,410
لذلك عند تحديد معلمة مسار في تعريف المسار،

41
00:02:54,410 --> 00:02:57,260
يتم تحديد معلمة المسار هذه باستخدام رمز مميز.

42
00:02:57,260 --> 00:03:02,300
لذلك عند تحديد المسار في مواصفات المسار

43
00:03:02,300 --> 00:03:05,600
للمسارات، يمكنك تحديد مسار مثل هذا.

44
00:03:05,600 --> 00:03:09,952
لذلك يمكنك أن تقول، dishdetail/:

45
00:03:09,952 --> 00:03:14,750
id، حيث يصبح المعرف الرمز المميز الذي يحمل

46
00:03:14,750 --> 00:03:18,359
معلمة المسار إلى المكون المحدد.

47
00:03:18,359 --> 00:03:21,200
مكون dishdetaille في هذا المثال.

48
00:03:21,200 --> 00:03:25,002
بهذه الطريقة، يمكنك تحديد معلمة مسار في المسار.

49
00:03:25,002 --> 00:03:30,098
ومن ثم من موقع آخر، يمكنك تمرير المعلمة

50
00:03:30,098 --> 00:03:34,810
إلى المكون المحدد الذي يحتاج إلى هذه المعلمة.

51
00:03:34,810 --> 00:03:37,240
مكون dishdetaille في هذا المثال.

52
00:03:38,810 --> 00:03:42,510
الآن، السؤال المهم التالي الذي سيطرح في عقلك هو،

53
00:03:42,510 --> 00:03:44,610
كيف يمكننا تمرير هذه المعلمة الطريق؟

54
00:03:44,610 --> 00:03:50,134
الآن، عندما تفكر في ذلك، عند التنقل من خلال مكون dishdetaille.

55
00:03:50,134 --> 00:03:55,255
أنت قادم من مكون آخر إما عن طريق النقر على رابط أو باستخدام

56
00:03:55,255 --> 00:04:01,020
شيء يسمى وظيفة التنقل مثل وحدة المسار التي توفرها لنا.

57
00:04:01,020 --> 00:04:06,240
سننظر في كلتا الطريقتين للانتقال إلى مكون معين.

58
00:04:06,240 --> 00:04:11,222
الآن، إذا كنت بحاجة إلى تحديد معلمة المسار، عند تحديد الرابط،

59
00:04:11,222 --> 00:04:16,070
تذكر أننا كنا نحدد الرابط باستخدام

60
00:04:16,070 --> 00:04:20,750
توجيه رابط الموجه في ملفات القالب الخاصة بنا.

61
00:04:20,750 --> 00:04:23,470
الآن، إذا كنت ستقوم بتحديد هذا في ملفات القالب،

62
00:04:23,470 --> 00:04:29,040
فإن رابط الموجه يأخذ أيضًا في صفيف كما نرى.

63
00:04:29,040 --> 00:04:31,500
صفيف معلمة ارتباط،

64
00:04:31,500 --> 00:04:35,170
حيث يمكنك تحديد المعلمة التي يتم نقلها بشكل صريح.

65
00:04:35,170 --> 00:04:40,480
لذلك، على سبيل المثال، في هذا المثال الذي تراه هنا، نحن نحدد،

66
00:04:40,480 --> 00:04:42,850
ثم تقوم بعمل ngFor.

67
00:04:42,850 --> 00:04:47,723
لذلك كنت حلقات من خلال مجموعة من كائنات جافا سكريبت في

68
00:04:47,723 --> 00:04:50,720
صفيف كائن جافا سكريبت.

69
00:04:50,720 --> 00:04:52,860
ثم، عند تحديد ارتباط جهاز التوجيه.

70
00:04:52,860 --> 00:04:55,770
لذلك داخل هناك، يمكنك تحديد رابط جهاز التوجيه.

71
00:04:55,770 --> 00:04:58,260
ولكن الآن، محاطة بأقواس مربعة.

72
00:04:58,260 --> 00:05:05,150
وهذا سوف يستغرق في قيمة مثل هذا يحتوي على مصفوفة معلمة ارتباط.

73
00:05:05,150 --> 00:05:08,768
حتى هنا، يمكنك تحديد أجزاء مختلفة من معلمة الرابط.

74
00:05:08,768 --> 00:05:15,370
وسوف ينضم جهاز التوجيه الزاوي إلى هذه معا لتشكيل عنوان URL الفعلي.

75
00:05:15,370 --> 00:05:19,300
حتى هنا، يمكنك أن ترى أن الجزء الأول من معلمة الارتباط

76
00:05:19,300 --> 00:05:23,640
محدد كسلسلة هنا، لذلك /dishdetaille هنا.

77
00:05:23,640 --> 00:05:28,970
ولكن يتم تحديد الجزء الثاني كقيمة يتم الحصول عليها

78
00:05:28,970 --> 00:05:30,070
من الطبق.

79
00:05:31,130 --> 00:05:38,710
وهو الطبق، كائن جافا سكريبت من مصفوفة كائن جافا سكريبت هنا.

80
00:05:38,710 --> 00:05:41,204
لذلك كل طبق سوف يحمل dish.id،

81
00:05:41,204 --> 00:05:44,090
لذلك يمكن تحديد dish.id

82
00:05:44,090 --> 00:05:47,640
كواحدة من القيم داخل صفيف معلمة الارتباط هذا هنا.

83
00:05:47,640 --> 00:05:52,170
لذلك عند النقر على هذا، بالنسبة للطبق المحدد،

84
00:05:52,170 --> 00:05:57,130
سيتم استبدال هذا الطبق. id بمعرف محدد للطبق.

85
00:05:57,130 --> 00:06:01,890
لذلك، على سبيل المثال، إذا كان المعرف 42، فسيتم استبدال هذا بـ 42.

86
00:06:01,890 --> 00:06:06,779
لذلك عندما يتلقى جهاز التوجيه الزاوي ارتباط جهاز التوجيه هذا،

87
00:06:06,779 --> 00:06:11,783
فإنه سيتم بناء عنوان ورل ك/disdetail/42.

88
00:06:11,783 --> 00:06:17,010
ال 42 يجري قيمة dish.id في هذه المرحلة.

89
00:06:17,010 --> 00:06:19,630
لذلك هذه هي الطريقة التي يمكنك تمرير في المعلمة.

90
00:06:19,630 --> 00:06:21,500
الجزء الثاني من السؤال، بالطبع،

91
00:06:21,500 --> 00:06:27,790
هو كيف يسترد المكون هذه القيمة من معلمة الارتباط؟

92
00:06:27,790 --> 00:06:30,130
التي سنتحدث عنها في الشريحة التالية.

93
00:06:31,320 --> 00:06:36,380
وهناك طريقة أخرى يمكن أن تسبب هذا التنقل للمكون الآخر

94
00:06:36,380 --> 00:06:42,380
هي أيضا استخدام طريقة تسمى التنقل التي توفرها وحدة جهاز التوجيه (router).

95
00:06:42,380 --> 00:06:44,740
حتى تتمكن من القول، هذا.router.naviation.

96
00:06:44,740 --> 00:06:47,888
لذلك يمكن تضمين هذا في شفرة TypeScript أو

97
00:06:47,888 --> 00:06:53,250
شفرة JavaScript الخاصة بك لتسبب التنقل تلقائيًا إلى الآخر.

98
00:06:53,250 --> 00:06:58,337
لذلك يمكن تضمين هذا داخل طريقة

99
00:06:58,337 --> 00:07:03,432
تضمينها في رمز TypeScript المكون الخاص بك.

100
00:07:03,432 --> 00:07:08,575
ويمكن استدعاء ذلك من القالب الخاص بك.

101
00:07:08,575 --> 00:07:11,921
قل، على سبيل المثال، عن طريق النقر على رابط هناك.

102
00:07:11,921 --> 00:07:17,097
حتى داخل هناك في التعليمات البرمجية، يمكنك تضمين بيان مثل هذا،

103
00:07:17,097 --> 00:07:19,582
هذا.router.naviation.

104
00:07:19,582 --> 00:07:24,152
وتأخذ طريقة التنقل هذه نفس مصفوفة معلمة الارتباط

105
00:07:24,152 --> 00:07:27,466
مثل قيمة المعلمة.

106
00:07:27,466 --> 00:07:33,056
لذلك سيمكن هذا أيضًا من توفير هذه المعلومات إلى جهاز التوجيه الزاوي

107
00:07:33,056 --> 00:07:37,186
بحيث يمكنه الانتقال إلى المكون الآخر.

108
00:07:37,186 --> 00:07:43,246
الآن، دعونا نذهب إلى الجانب الآخر من هذه المعادلة.

109
00:07:43,246 --> 00:07:50,466
كيف يقوم أحد المكونات، مثل مكون

110
00:07:50,466 --> 00:07:57,821
dishdetails في هذا المثال، باسترداد هذه القيمة المحددة كرمز مميز في رابط عنوان URL هناك؟

111
00:07:57,821 --> 00:08:02,789
الآن، هذا هو المكان الذي توفر فيه مكتبة جهاز التوجيه الزاوي

112
00:08:02,789 --> 00:08:07,940
خدمة تسمى خدمة ActivatedRoute.

113
00:08:07,940 --> 00:08:12,913
يمكن الاستفادة من خدمة ActivatedRoute هذه لتكون قادرة على استرداد

114
00:08:12,913 --> 00:08:14,360
هذه القيم.

115
00:08:14,360 --> 00:08:18,556
الآن، على وجه الخصوص، لتسهيل استرجاع هذه المعلمة،

116
00:08:18,556 --> 00:08:22,689
توفر خدمة ActivatedRoute ثلاثة أشياء مختلفة.

117
00:08:22,689 --> 00:08:29,140
على سبيل المثال، يوفر هذا الأسلوب لاسترداد عنوان URL.

118
00:08:29,140 --> 00:08:32,198
الذي يمكن ملاحظته لمسار المسار.

119
00:08:32,198 --> 00:08:37,085
الذي يتم تمثيله كمجموعة من السلاسل لكل مسار مسار مسار.

120
00:08:37,085 --> 00:08:39,271
لقد واجهت هذه الكلمة يمكن ملاحظتها هنا.

121
00:08:39,271 --> 00:08:41,770
في هذه اللحظة، تمسكي بهذه الكلمة.

122
00:08:41,770 --> 00:08:46,250
سنعود، وننظر إلى ما يمكن ملاحظته في الوحدة التالية.

123
00:08:46,250 --> 00:08:49,190
ولكن في الوقت الحالي، ما أدركناه هو أن

124
00:08:49,190 --> 00:08:52,430
خدمة ActivatedRoute توفر هذه الملاحظة.

125
00:08:53,970 --> 00:08:58,920
وبالمثل، توفر خدمة ActivatedRoute أيضا آخر يمكن ملاحظتها يسمى params.

126
00:08:58,920 --> 00:09:03,920
هذه المعلمات يمكن ملاحظتها يجعل متاحة لمكون

127
00:09:03,920 --> 00:09:07,990
قيم المعلمات التي يتم تمريرها في كمعلمة المسار.

128
00:09:07,990 --> 00:09:12,260
لذا فإن هذه المعلمات التي يمكن ملاحظتها هي التي سنستخدمها

129
00:09:12,260 --> 00:09:15,740
لاسترداد هذه القيمة داخل مكون dishdetaille.

130
00:09:15,740 --> 00:09:18,290
سترى الطريقة الدقيقة للقيام بذلك

131
00:09:18,290 --> 00:09:21,860
في التمرين الذي يتبع هذه المحاضرة.

132
00:09:21,860 --> 00:09:29,740
وبالمثل، يمكنك أيضًا تمرير معلمات الاستعلام إلى مكون آخر.

133
00:09:29,740 --> 00:09:33,185
الآن، نحن لن نتعامل مع مثال لمعلمات الاستعلام في الوقت الحالي.

134
00:09:33,185 --> 00:09:39,480
ولكن في وقت لاحق، قد نواجه مثالا على كيفية تمرير

135
00:09:39,480 --> 00:09:46,010
معلمات الاستعلام من خلال خدمة ActivatedRoute إلى مكون آخر.

136
00:09:46,010 --> 00:09:50,870
مع هذا الفهم، دعونا المضي قدما في التمرين التالي.

137
00:09:50,870 --> 00:09:54,790
سنستمر في تطوير تطبيق صفحة واحدة.

138
00:09:54,790 --> 00:09:59,517
ثم قم بتمكين استخدام معلمة مسار لتمريرها

139
00:09:59,517 --> 00:10:03,605
في معرف الطبق إلى مكون dishdetaille.

140
00:10:03,605 --> 00:10:09,990
بحيث يمكن لمكون dishdetaille، بدوره، استخدام هذا المعرف للاستعلام عن خدمة الطبق.

141
00:10:09,990 --> 00:10:14,280
للحصول على تفاصيل هذا الطبق المحدد الذي من

142
00:10:14,280 --> 00:10:17,406
المفترض أن يعرض ضمن وجهة نظرها.

143
00:10:17,406 --> 00:10:24,269
[ موسيقى]