1
00:00:03,650 --> 00:00:10,075
كان لدينا فقط مقدمة موجزة لنسب التوجيهات في المحاضرة السابقة.

2
00:00:10,075 --> 00:00:16,440
دعونا الآن بناء توجيه سمة مخصصة لتطبيقنا الزاوي ومن ثم

3
00:00:16,440 --> 00:00:23,025
الاستفادة منه ضمن وجهات نظر بعض المكونات داخل التطبيق الزاوي لدينا.

4
00:00:23,025 --> 00:00:26,340
على طول الطريق، سوف نتعلم كيف يمكننا إنشاء

5
00:00:26,340 --> 00:00:30,795
توجيهات مخصصة واستخدامها في تطبيق Angular الخاص بنا.

6
00:00:30,795 --> 00:00:36,275
سنستفيد من Angular CLI لإنشاء التوجيه المخصص وبعد ذلك،

7
00:00:36,275 --> 00:00:39,830
تحديثه لتنفيذ نوع

8
00:00:39,830 --> 00:00:45,245
الميزات التي نحتاجها من خلال توجيه السمة هذا.

9
00:00:45,245 --> 00:00:51,220
تحت الاحتفاظ بالتوجيه في مجلد منفصل باسم التوجيهات،

10
00:00:51,220 --> 00:00:52,700
داخل مجلد التطبيق الخاص بي.

11
00:00:52,700 --> 00:00:56,805
لذلك، اسمحوا لي إنشاء مجلد جديد باسم التوجيهات.

12
00:00:56,805 --> 00:01:02,820
الآن، سأقوم بإنشاء التوجيه المخصص الخاص بي داخل مجلد التوجيهات هذا.

13
00:01:02,820 --> 00:01:07,170
سوف تأخذ مساعدة من كلي الزاوي لإنشاء التوجيه المخصص لدينا.

14
00:01:07,170 --> 00:01:08,495
لذلك، في موجه،

15
00:01:08,495 --> 00:01:20,400
اكتب ng توليد أو g اكتشافات/تسليط الضوء.

16
00:01:20,780 --> 00:01:26,110
لذلك، سيتم استدعاء هذا التوجيه الخاص توجيه تسليط الضوء.

17
00:01:26,110 --> 00:01:28,790
لذلك مع هذا، سنقوم بإنشاء

18
00:01:28,790 --> 00:01:34,460
توجيه جديد يسمى توجيه تسليط الضوء وبعد ذلك سوف نذهب الآن

19
00:01:34,460 --> 00:01:38,600
وتحرير أن تسليط الضوء على ملفات التوجيه التي

20
00:01:38,600 --> 00:01:43,175
تم إنشاؤها لإنشاء التوجيه المخصص لدينا.

21
00:01:43,175 --> 00:01:46,895
ما الذي أحاول تحقيقه بالضبط مع هذا التوجيه؟

22
00:01:46,895 --> 00:01:52,910
اسمحوا لي أن يأخذك إلى عرض القائمة داخل التطبيق الزاوي لدينا.

23
00:01:52,910 --> 00:01:54,355
في عرض القائمة،

24
00:01:54,355 --> 00:01:58,420
عندما أريد تحديد أي واحد من هذه العناصر حاليا،

25
00:01:58,420 --> 00:02:01,495
ليس لدي أي فكرة بالضبط أين أنا.

26
00:02:01,495 --> 00:02:08,520
الآن بدلاً من ذلك، عندما يحوم الماوس على أي من هذه العناصر في قائمة الشبكة الخاصة بي،

27
00:02:08,520 --> 00:02:13,340
أريد أن أكون قادرًا على تسليط الضوء على بعض العناصر للإشارة إلى أنه إذا قمت بالنقر فوق،

28
00:02:13,340 --> 00:02:15,870
سأقوم باختيار هذا العنصر المعين.

29
00:02:15,870 --> 00:02:19,220
لذلك، هذا هو ما الوظيفة التي سأقوم

30
00:02:19,220 --> 00:02:23,825
بتصميمها باستخدام توجيه تسليط الضوء الخاص بي الذي قمت بإنشائه للتو.

31
00:02:23,825 --> 00:02:28,410
للقيام بذلك، دعونا فتح ملف directive.ts تسليط الضوء.

32
00:02:28,410 --> 00:02:33,935
لذلك، ترى أن لدينا السقالات العارية المتاحة للتوجيه

33
00:02:33,935 --> 00:02:36,500
بالفعل هنا وسترى أننا قد

34
00:02:36,500 --> 00:02:39,845
استوردنا بالفعل المدير من رمز الزاوي.

35
00:02:39,845 --> 00:02:45,230
الآن لهذا، أنا ذاهب لإضافة في عدد قليل من الواردات أكثر.

36
00:02:45,230 --> 00:02:52,055
لذلك، سنقوم باستيراد ElementRef وبعد ذلك سنقوم باستيراد Renderer2 هنا.

37
00:02:52,055 --> 00:02:57,215
الآن Renderer2 متاح فقط مع الزاوي أربعة وما فوق.

38
00:02:57,215 --> 00:02:59,710
كان يسمى الإصدار السابق من العارض

39
00:02:59,710 --> 00:03:04,290
renderush وقد تم تكراره الآن مع Angular أربعة.

40
00:03:04,290 --> 00:03:06,920
Renderer2 هو الآن تنفيذ جديد من

41
00:03:06,920 --> 00:03:11,030
العارض مع دعم أفضل لبعض الميزات الأخرى.

42
00:03:11,030 --> 00:03:18,045
لذلك، أنا ذاهب لتطبيق Renderer2 لإنشاء توجيه تسليط الضوء.

43
00:03:18,045 --> 00:03:20,005
الآن لماذا نستخدم هذا العارض؟

44
00:03:20,005 --> 00:03:23,690
الآن عند إنشاء توجيهات داخل تطبيق Angular الخاص

45
00:03:23,690 --> 00:03:25,640
بك، من تطبيق Angular نفسه،

46
00:03:25,640 --> 00:03:30,750
على الرغم من أنه في الوقت الحالي يتم تقديم تطبيق Angular الخاص بنا بشكل رئيسي في المتصفح،

47
00:03:30,750 --> 00:03:33,740
يمكنك استخدام نفس شفرة السقالات

48
00:03:33,740 --> 00:03:37,420
لتطبيق Angular الخاص بك لإنشاء تطبيق لأغراض أخرى.

49
00:03:37,420 --> 00:03:42,985
في دورة تخطي الأصلية التي سنراها لاحقًا في هذا التخصص،

50
00:03:42,985 --> 00:03:50,385
سنرى استخدامًا آخر لهذا الرمز لإنشاء التطبيقات باستخدام NativeScript.

51
00:03:50,385 --> 00:03:54,470
لذلك، في هذه الحالة سيتم تقديم بطريقة مختلفة،

52
00:03:54,470 --> 00:03:56,160
وليس في متصفح.

53
00:03:56,160 --> 00:04:00,455
لذلك، نحن بحاجة إلى استخدام هذا Renderer2،

54
00:04:00,455 --> 00:04:03,710
والذي يسمح لنا للتكيف تلقائيا مع

55
00:04:03,710 --> 00:04:08,120
النظام الأساسي المناسب الذي يتم تقديم هذا الرأي.

56
00:04:08,120 --> 00:04:13,320
لذلك، هذا هو السبب في أنني الاستفادة من العارض هنا.

57
00:04:13,660 --> 00:04:20,460
أيضا، شيء آخر أريد استيراده هو HostListener.

58
00:04:20,460 --> 00:04:24,650
سيستمع HostListener إلى حركات الماوس من الشاشة

59
00:04:24,650 --> 00:04:28,755
ويستجيب بشكل مناسب في هذه الظروف.

60
00:04:28,755 --> 00:04:34,099
سنرى استخدام هذه عندما نقوم بإنشاء التوجيه في لحظات قليلة.

61
00:04:34,099 --> 00:04:37,010
حتى الآن، ونحن قد استوردنا الأشياء التي نحتاجها،

62
00:04:37,010 --> 00:04:40,620
ونحن في طريقنا لحقن بعض الأشياء في المنشئ لدينا.

63
00:04:40,620 --> 00:04:47,180
لذا، سنستخدم أولاً el،

64
00:04:47,180 --> 00:04:52,625
وهو من النوع elementRef

65
00:04:52,625 --> 00:04:59,569
وأيضًا الثاني الذي سنستخدمه هو العارض،

66
00:04:59,569 --> 00:05:04,265
وهو من النوع Renderer2.

67
00:05:04,265 --> 00:05:11,254
الآن مع هذا، ما سنقوم به هو أننا سوف نستخدم

68
00:05:11,254 --> 00:05:20,360
HostListener ومن ثم أنها تشير إلى أنه بالنسبة لـ HostListener،

69
00:05:20,360 --> 00:05:28,094
عندما يحدث حدث mouseenter،

70
00:05:28,094 --> 00:05:38,340
ثم سنقوم باستدعاء طريقة onmouseenter

71
00:05:38,340 --> 00:05:41,400
وفي طريقة onmouseenter، سنقوم بشيء ما.

72
00:05:41,400 --> 00:05:43,790
وبالمثل، سأقوم بإنشاء واحد آخر

73
00:05:43,790 --> 00:05:55,005
يسمى HostListener و mouseleave.

74
00:05:55,005 --> 00:05:58,310
لذلك عندما يترك الماوس منطقة معينة،

75
00:05:58,310 --> 00:06:02,790
ثم ماذا ستفعل على mouseleave؟

76
00:06:02,950 --> 00:06:06,470
نحن ذاهبون للقيام بعملية مختلفة.

77
00:06:06,470 --> 00:06:11,660
لذلك، ما سنقوم به هو عندما يدخل الماوس منطقة معينة، في هذه الحالة،

78
00:06:11,660 --> 00:06:15,710
نحن نستخدم هذا التوجيه السمة من أجل تسليط الضوء

79
00:06:15,710 --> 00:06:22,130
على عنصر معين من قائمة الشبكة الخاصة بي التي تحوم الماوس على.

80
00:06:22,130 --> 00:06:24,935
لذلك، هذا هو الغرض من تنفيذ هذه

81
00:06:24,935 --> 00:06:28,050
وعندما مؤشر الماوس تحوم بعيدا عن هذا البند، والتي

82
00:06:28,050 --> 00:06:29,580
لن يتم تسليط الضوء عليها بعد الآن.

83
00:06:29,580 --> 00:06:31,575
لذلك، هذا هو الغرض من هذا التوجيه،

84
00:06:31,575 --> 00:06:33,850
التوجيه تسليط الضوء الذي أقوم بإنشائه هنا.

85
00:06:33,850 --> 00:06:40,715
لذلك، عندما يدخل الماوس منطقة معينة.

86
00:06:40,715 --> 00:06:47,245
لذلك، أنا ذاهب لاستخدام العارض والعارض يوفر طريقة تسمى أدكلاس.

87
00:06:47,245 --> 00:06:55,990
لذلك، سيتم استخدام هذه الطريقة لإضافة فئة إلى عنصر الشبكة في قائمة الشبكة الخاصة بي.

88
00:06:55,990 --> 00:06:58,755
لذا، فإن الفئة التي سأقوم بإضافتها،

89
00:06:58,755 --> 00:07:08,160
فإن الطريقة التي يتم تكوينها ستقول this.el.NativeElement

90
00:07:08,160 --> 00:07:12,260
والمعلمة الثانية هي

91
00:07:12,260 --> 00:07:17,240
اسم الفئة التي ستقوم بتطبيقها عند المغامرة في هذه المنطقة.

92
00:07:17,240 --> 00:07:21,965
لذلك، سنقوم بتطبيق فئة التمييز هذه على هذا العنصر عندما

93
00:07:21,965 --> 00:07:27,425
يتحرك الماوس إلى المنطقة حيث يتم عرض هذا العنصر في طريقة العرض.

94
00:07:27,425 --> 00:07:34,765
الآن، نفس الشيء سأقوم بعمل طريقة أخرى عندما يغادر الماوس،

95
00:07:34,765 --> 00:07:37,200
سأقوم بإزالة هذه الفئة.

96
00:07:37,200 --> 00:07:41,275
لذلك، يتم دعم طريقة ريموفيكلاس أيضا من قبل Renderer2.

97
00:07:41,275 --> 00:07:42,530
لذلك، في هذه الحالة،

98
00:07:42,530 --> 00:07:44,780
عندما يتحرك الماوس إلى تلك المنطقة،

99
00:07:44,780 --> 00:07:49,270
سيتم إضافة فئة تسليط الضوء هذه إلى هذا البند الشبكة.

100
00:07:49,270 --> 00:07:52,250
عندما يترك الماوس هذا البند شبكة معينة،

101
00:07:52,250 --> 00:07:54,890
سيتم إزالة فئة تسليط الضوء من عناصر الشبكة.

102
00:07:54,890 --> 00:07:57,685
لذا، هذه هي الطريقة التي تستخدم بها توجيه السمة هذا،

103
00:07:57,685 --> 00:08:00,540
أقوم بإضافة وإزالة الطبقات، وفئات

104
00:08:00,540 --> 00:08:06,840
CSS إلى عنصر الشبكة الخاص بي في صفحة GridView الخاصة بي.

105
00:08:06,840 --> 00:08:12,070
الآن، الخطوة التالية هي بالطبع إنشاء هذه الفئة تسمى فئة تسليط الضوء.

106
00:08:12,070 --> 00:08:16,535
لذلك، للقيام بذلك، سوف أذهب إلى ملف.scss الأنماط

107
00:08:16,535 --> 00:08:21,495
حيث لدينا الأنماط العالمية المخزنة هنا.

108
00:08:21,495 --> 00:08:23,900
لذلك، داخل ملف الأنماط. scss،

109
00:08:23,900 --> 00:08:32,385
وسوف أضيف في فئة CSS تسليط الضوء هناك.

110
00:08:32,385 --> 00:08:37,340
فئة CSS تسليط الضوء التي سأعرفها على أنها لون الخلفية.

111
00:08:37,340 --> 00:08:42,825
سأقوم بتطبيق خلفية شاحبة،

112
00:08:42,825 --> 00:08:46,810
والتي قمت بتعريفها مسبقًا، وبعد ذلك،

113
00:08:46,810 --> 00:08:52,140
سأقوم بتطبيق حدود بكسل واحد،

114
00:08:52,140 --> 00:08:55,780
حدود صلبة للون، لون

115
00:08:55,860 --> 00:09:04,595
أساسي داكن، والذي عرفته أيضًا مسبقًا

116
00:09:04,595 --> 00:09:13,335
كمتغير CSS وسأقوم أيضًا بزيادة مؤشر z إلى واحد.

117
00:09:13,335 --> 00:09:18,750
مما يعني أن هذا البند سيتم رفعه فوق البنود المتبقية هناك.

118
00:09:18,750 --> 00:09:24,790
أنا متأكد من معرفتك بـ CSS أنك تفهم ما يتم القيام به.

119
00:09:24,790 --> 00:09:31,870
وبالإضافة إلى ذلك، وأنا ذاهب للقيام قليلا من تحويل على هذا البند هناك،

120
00:09:31,870 --> 00:09:36,495
وأنا مجرد الذهاب لتوسيع نطاق ذلك بمقدار صغير، من

121
00:09:36,495 --> 00:09:39,570
خلال توسيع نطاقه يصل إلى 1.01.

122
00:09:39,570 --> 00:09:42,220
لذلك، أثار قليلا قليلا ثم ظهرت،

123
00:09:42,220 --> 00:09:46,115
بحيث يسلط الضوء على الشاشة.

124
00:09:46,115 --> 00:09:50,370
لذا، هذه هي فئة CSS التي

125
00:09:50,370 --> 00:09:54,535
سأقوم بتطبيقها باستخدام التوجيه المخصص الذي قمت بإنشائه هناك.

126
00:09:54,535 --> 00:09:57,530
الآن، أين أنا ذاهب لتطبيق هذا التوجيه المخصص؟

127
00:09:57,530 --> 00:10:04,340
سنقوم باستخدام هذا التوجيه المخصص في ملف قالب مكونات القائمة لدينا.

128
00:10:04,340 --> 00:10:06,170
الآن، قبل أن نفعل ذلك،

129
00:10:06,170 --> 00:10:08,840
دعونا نعود لتسليط الضوء على التوجيه

130
00:10:08,840 --> 00:10:11,610
وستلاحظ أنه في توجيه تسليط الضوء،

131
00:10:11,610 --> 00:10:17,555
لديك هذا الديكور التوجيه هنا حيث لديك خاصية تسمى محدد،

132
00:10:17,555 --> 00:10:20,355
والتي تم تعيينها لتسليط الضوء على التطبيق.

133
00:10:20,355 --> 00:10:23,360
لذلك، أينما تريد استخدام هذا التوجيه،

134
00:10:23,360 --> 00:10:25,430
سوف تستخدم سمة تسمى

135
00:10:25,430 --> 00:10:30,110
AppHighlight ضمن هذا العنصر المعين في القالب الخاص بك.

136
00:10:30,110 --> 00:10:33,940
لذا، هذه هي الطريقة التي يتم بها إنشاء هذا التوجيه.

137
00:10:33,940 --> 00:10:36,910
لذلك، دعونا تطبيق هذا التطبيق تسليط الضوء على

138
00:10:36,910 --> 00:10:41,165
التوجيه السمة داخل ملف قالب مكونات القائمة لدينا.

139
00:10:41,165 --> 00:10:44,749
لذلك، والذهاب إلى ملف قالب مكونات القائمة،

140
00:10:44,749 --> 00:10:50,090
وأنا ذاهب لتطبيق هذا التوجيه تسليط الضوء على هذا البلاط الحصيرة شبكة هنا.

141
00:10:50,090 --> 00:10:52,330
لذلك، في هذا البلاط الشبكة،

142
00:10:52,330 --> 00:11:01,950
وسوف تطبيق هذا التوجيه السمة AppHighlight على هذا العنصر معين هنا.

143
00:11:01,950 --> 00:11:04,485
مع هذا، أكملنا جميع التحديثات.

144
00:11:04,485 --> 00:11:11,005
دعونا حفظ التغييرات ثم نذهب ونلقي نظرة على طلبنا بعد هذا التغيير.

145
00:11:11,005 --> 00:11:13,680
الذهاب إلى تطبيقنا في المتصفح.

146
00:11:13,680 --> 00:11:20,270
الآن، مع تطبيق التوجيه AppHighlight الذي أنشأنا للتو،

147
00:11:20,270 --> 00:11:27,050
ستلاحظ بالضبط ما يحدث عندما نتصفح على عنصر في عرض القائمة لدينا هنا.

148
00:11:27,050 --> 00:11:32,010
لذلك، تلاحظ أنه كلما قمت بالتمرير على عنصر في طريقة العرض،

149
00:11:32,010 --> 00:11:36,770
يتم تطبيق فئة CSS المميزة على كل منها،

150
00:11:36,770 --> 00:11:41,150
حيث يتم تمييز العنصر المحدد في القائمة،

151
00:11:41,150 --> 00:11:46,270
بحيث يعطي ذلك تجربة مستخدم أفضل للمستخدم.

152
00:11:46,270 --> 00:11:50,719
يمكنك أن ترى أن حجم هذا العنصر هو من أي وقت مضى

153
00:11:50,719 --> 00:11:55,840
زيادة طفيفة جدا وعرض في وجهة النظر هنا.

154
00:11:55,840 --> 00:11:58,910
هذا يكمل تنفيذ

155
00:11:58,910 --> 00:12:03,470
توجيه السمة المخصصة الذي قمنا به في هذا التمرين.

156
00:12:03,470 --> 00:12:09,810
هذا هو الوقت المناسب بالنسبة لك للقيام جيت الالتزام مع توجيه الرسالة.