كان لدينا فقط مقدمة موجزة لنسب التوجيهات في المحاضرة السابقة.
دعونا الآن بناء توجيه سمة مخصصة لتطبيقنا الزاوي ومن ثم
الاستفادة منه ضمن وجهات نظر بعض المكونات داخل التطبيق الزاوي لدينا.
على طول الطريق، سوف نتعلم كيف يمكننا إنشاء
توجيهات مخصصة واستخدامها في تطبيق Angular الخاص بنا.
سنستفيد من Angular CLI لإنشاء التوجيه المخصص وبعد ذلك،
تحديثه لتنفيذ نوع
الميزات التي نحتاجها من خلال توجيه السمة هذا.
تحت الاحتفاظ بالتوجيه في مجلد منفصل باسم التوجيهات،
داخل مجلد التطبيق الخاص بي.
لذلك، اسمحوا لي إنشاء مجلد جديد باسم التوجيهات.
الآن، سأقوم بإنشاء التوجيه المخصص الخاص بي داخل مجلد التوجيهات هذا.
سوف تأخذ مساعدة من كلي الزاوي لإنشاء التوجيه المخصص لدينا.
لذلك، في موجه،
اكتب ng توليد أو g اكتشافات/تسليط الضوء.
لذلك، سيتم استدعاء هذا التوجيه الخاص توجيه تسليط الضوء.
لذلك مع هذا، سنقوم بإنشاء
توجيه جديد يسمى توجيه تسليط الضوء وبعد ذلك سوف نذهب الآن
وتحرير أن تسليط الضوء على ملفات التوجيه التي
تم إنشاؤها لإنشاء التوجيه المخصص لدينا.
ما الذي أحاول تحقيقه بالضبط مع هذا التوجيه؟
اسمحوا لي أن يأخذك إلى عرض القائمة داخل التطبيق الزاوي لدينا.
في عرض القائمة،
عندما أريد تحديد أي واحد من هذه العناصر حاليا،
ليس لدي أي فكرة بالضبط أين أنا.
الآن بدلاً من ذلك، عندما يحوم الماوس على أي من هذه العناصر في قائمة الشبكة الخاصة بي،
أريد أن أكون قادرًا على تسليط الضوء على بعض العناصر للإشارة إلى أنه إذا قمت بالنقر فوق،
سأقوم باختيار هذا العنصر المعين.
لذلك، هذا هو ما الوظيفة التي سأقوم
بتصميمها باستخدام توجيه تسليط الضوء الخاص بي الذي قمت بإنشائه للتو.
للقيام بذلك، دعونا فتح ملف directive.ts تسليط الضوء.
لذلك، ترى أن لدينا السقالات العارية المتاحة للتوجيه
بالفعل هنا وسترى أننا قد
استوردنا بالفعل المدير من رمز الزاوي.
الآن لهذا، أنا ذاهب لإضافة في عدد قليل من الواردات أكثر.
لذلك، سنقوم باستيراد ElementRef وبعد ذلك سنقوم باستيراد Renderer2 هنا.
الآن Renderer2 متاح فقط مع الزاوي أربعة وما فوق.
كان يسمى الإصدار السابق من العارض
renderush وقد تم تكراره الآن مع Angular أربعة.
Renderer2 هو الآن تنفيذ جديد من
العارض مع دعم أفضل لبعض الميزات الأخرى.
لذلك، أنا ذاهب لتطبيق Renderer2 لإنشاء توجيه تسليط الضوء.
الآن لماذا نستخدم هذا العارض؟
الآن عند إنشاء توجيهات داخل تطبيق Angular الخاص
بك، من تطبيق Angular نفسه،
على الرغم من أنه في الوقت الحالي يتم تقديم تطبيق Angular الخاص بنا بشكل رئيسي في المتصفح،
يمكنك استخدام نفس شفرة السقالات
لتطبيق Angular الخاص بك لإنشاء تطبيق لأغراض أخرى.
في دورة تخطي الأصلية التي سنراها لاحقًا في هذا التخصص،
سنرى استخدامًا آخر لهذا الرمز لإنشاء التطبيقات باستخدام NativeScript.
لذلك، في هذه الحالة سيتم تقديم بطريقة مختلفة،
وليس في متصفح.
لذلك، نحن بحاجة إلى استخدام هذا Renderer2،
والذي يسمح لنا للتكيف تلقائيا مع
النظام الأساسي المناسب الذي يتم تقديم هذا الرأي.
لذلك، هذا هو السبب في أنني الاستفادة من العارض هنا.
أيضا، شيء آخر أريد استيراده هو HostListener.
سيستمع HostListener إلى حركات الماوس من الشاشة
ويستجيب بشكل مناسب في هذه الظروف.
سنرى استخدام هذه عندما نقوم بإنشاء التوجيه في لحظات قليلة.
حتى الآن، ونحن قد استوردنا الأشياء التي نحتاجها،
ونحن في طريقنا لحقن بعض الأشياء في المنشئ لدينا.
لذا، سنستخدم أولاً el،
وهو من النوع elementRef
وأيضًا الثاني الذي سنستخدمه هو العارض،
وهو من النوع Renderer2.
الآن مع هذا، ما سنقوم به هو أننا سوف نستخدم
HostListener ومن ثم أنها تشير إلى أنه بالنسبة لـ HostListener،
عندما يحدث حدث mouseenter،
ثم سنقوم باستدعاء طريقة onmouseenter
وفي طريقة onmouseenter، سنقوم بشيء ما.
وبالمثل، سأقوم بإنشاء واحد آخر
يسمى HostListener و mouseleave.
لذلك عندما يترك الماوس منطقة معينة،
ثم ماذا ستفعل على mouseleave؟
نحن ذاهبون للقيام بعملية مختلفة.
لذلك، ما سنقوم به هو عندما يدخل الماوس منطقة معينة، في هذه الحالة،
نحن نستخدم هذا التوجيه السمة من أجل تسليط الضوء
على عنصر معين من قائمة الشبكة الخاصة بي التي تحوم الماوس على.
لذلك، هذا هو الغرض من تنفيذ هذه
وعندما مؤشر الماوس تحوم بعيدا عن هذا البند، والتي
لن يتم تسليط الضوء عليها بعد الآن.
لذلك، هذا هو الغرض من هذا التوجيه،
التوجيه تسليط الضوء الذي أقوم بإنشائه هنا.
لذلك، عندما يدخل الماوس منطقة معينة.
لذلك، أنا ذاهب لاستخدام العارض والعارض يوفر طريقة تسمى أدكلاس.
لذلك، سيتم استخدام هذه الطريقة لإضافة فئة إلى عنصر الشبكة في قائمة الشبكة الخاصة بي.
لذا، فإن الفئة التي سأقوم بإضافتها،
فإن الطريقة التي يتم تكوينها ستقول this.el.NativeElement
والمعلمة الثانية هي
اسم الفئة التي ستقوم بتطبيقها عند المغامرة في هذه المنطقة.
لذلك، سنقوم بتطبيق فئة التمييز هذه على هذا العنصر عندما
يتحرك الماوس إلى المنطقة حيث يتم عرض هذا العنصر في طريقة العرض.
الآن، نفس الشيء سأقوم بعمل طريقة أخرى عندما يغادر الماوس،
سأقوم بإزالة هذه الفئة.
لذلك، يتم دعم طريقة ريموفيكلاس أيضا من قبل Renderer2.
لذلك، في هذه الحالة،
عندما يتحرك الماوس إلى تلك المنطقة،
سيتم إضافة فئة تسليط الضوء هذه إلى هذا البند الشبكة.
عندما يترك الماوس هذا البند شبكة معينة،
سيتم إزالة فئة تسليط الضوء من عناصر الشبكة.
لذا، هذه هي الطريقة التي تستخدم بها توجيه السمة هذا،
أقوم بإضافة وإزالة الطبقات، وفئات
CSS إلى عنصر الشبكة الخاص بي في صفحة GridView الخاصة بي.
الآن، الخطوة التالية هي بالطبع إنشاء هذه الفئة تسمى فئة تسليط الضوء.
لذلك، للقيام بذلك، سوف أذهب إلى ملف.scss الأنماط
حيث لدينا الأنماط العالمية المخزنة هنا.
لذلك، داخل ملف الأنماط. scss،
وسوف أضيف في فئة CSS تسليط الضوء هناك.
فئة CSS تسليط الضوء التي سأعرفها على أنها لون الخلفية.
سأقوم بتطبيق خلفية شاحبة،
والتي قمت بتعريفها مسبقًا، وبعد ذلك،
سأقوم بتطبيق حدود بكسل واحد،
حدود صلبة للون، لون
أساسي داكن، والذي عرفته أيضًا مسبقًا
كمتغير CSS وسأقوم أيضًا بزيادة مؤشر z إلى واحد.
مما يعني أن هذا البند سيتم رفعه فوق البنود المتبقية هناك.
أنا متأكد من معرفتك بـ CSS أنك تفهم ما يتم القيام به.
وبالإضافة إلى ذلك، وأنا ذاهب للقيام قليلا من تحويل على هذا البند هناك،
وأنا مجرد الذهاب لتوسيع نطاق ذلك بمقدار صغير، من
خلال توسيع نطاقه يصل إلى 1.01.
لذلك، أثار قليلا قليلا ثم ظهرت،
بحيث يسلط الضوء على الشاشة.
لذا، هذه هي فئة CSS التي
سأقوم بتطبيقها باستخدام التوجيه المخصص الذي قمت بإنشائه هناك.
الآن، أين أنا ذاهب لتطبيق هذا التوجيه المخصص؟
سنقوم باستخدام هذا التوجيه المخصص في ملف قالب مكونات القائمة لدينا.
الآن، قبل أن نفعل ذلك،
دعونا نعود لتسليط الضوء على التوجيه
وستلاحظ أنه في توجيه تسليط الضوء،
لديك هذا الديكور التوجيه هنا حيث لديك خاصية تسمى محدد،
والتي تم تعيينها لتسليط الضوء على التطبيق.
لذلك، أينما تريد استخدام هذا التوجيه،
سوف تستخدم سمة تسمى
AppHighlight ضمن هذا العنصر المعين في القالب الخاص بك.
لذا، هذه هي الطريقة التي يتم بها إنشاء هذا التوجيه.
لذلك، دعونا تطبيق هذا التطبيق تسليط الضوء على
التوجيه السمة داخل ملف قالب مكونات القائمة لدينا.
لذلك، والذهاب إلى ملف قالب مكونات القائمة،
وأنا ذاهب لتطبيق هذا التوجيه تسليط الضوء على هذا البلاط الحصيرة شبكة هنا.
لذلك، في هذا البلاط الشبكة،
وسوف تطبيق هذا التوجيه السمة AppHighlight على هذا العنصر معين هنا.
مع هذا، أكملنا جميع التحديثات.
دعونا حفظ التغييرات ثم نذهب ونلقي نظرة على طلبنا بعد هذا التغيير.
الذهاب إلى تطبيقنا في المتصفح.
الآن، مع تطبيق التوجيه AppHighlight الذي أنشأنا للتو،
ستلاحظ بالضبط ما يحدث عندما نتصفح على عنصر في عرض القائمة لدينا هنا.
لذلك، تلاحظ أنه كلما قمت بالتمرير على عنصر في طريقة العرض،
يتم تطبيق فئة CSS المميزة على كل منها،
حيث يتم تمييز العنصر المحدد في القائمة،
بحيث يعطي ذلك تجربة مستخدم أفضل للمستخدم.
يمكنك أن ترى أن حجم هذا العنصر هو من أي وقت مضى
زيادة طفيفة جدا وعرض في وجهة النظر هنا.
هذا يكمل تنفيذ
توجيه السمة المخصصة الذي قمنا به في هذا التمرين.
هذا هو الوقت المناسب بالنسبة لك للقيام جيت الالتزام مع توجيه الرسالة.