الآن بعد أن حصلنا على فهم لتطبيقات صفحة واحدة،
سنواصل العمل على
تطبيقنا الزاوي الذي كنا نعمل في التدريبات حتى
الآن ونطويره إلى
تطبيق صفحة واحدة باستخدام دعم وحدة التوجيه الزاوي.
لقد قمنا بالفعل بتضمين مكونات متعددة كجزء من
تطبيقنا الزاوي في التمرين السابق، وقد قمنا بالفعل
بتكوين تطبيقنا الزاوي لتكون قادرة على التوجيه
بين مكونين مختلفين.
الآن، سوف ندمج أكثر في تطبيقنا الزاوي
ونطوره في التطبيق الزاوي الكامل جنبا إلى جنب مع
الملاحة بين مختلف وجهات النظر
التي تقدمها مختلف مكونات تطبيقنا.
استمرارًا في تطبيقنا كما هو الآن،
لدينا المنزل الذي يتم تقديمه عند الانتقال إلى تطبيقنا
الآن ثم
تم عرض قالب الصفحة الرئيسية بين الرأس والتذييل ثم عند الانتقال إلى القائمة،
يتم عرض القائمة بين الرأس و تذييل الصفحة في طريقة العرض هنا.
الآن، من الواضح أننا بحاجة إلى دمج المكونات الأخرى التي قمنا
بتضمينها في تطبيقنا الزاوي
لتطوير هذا كتطبيق زاوي كامل.
في هذا التمرين، سنقوم بدمج ContactComponent،
سنقوم بتحديث القالب الخاص بـ ContactComponent،
سنقوم أيضًا بتحديث القالب الخاص بـ HomeComponent واتخاذ هذا
خطوة إلى الأمام نحو تطبيقنا الزاوي الخاص بالصفحة الواحدة.
دعونا نبدأ مع كونتاكتكومبوننت.
للبدء، قم أولاً بنسخ القالب الخاص
بـ ContactComponent الذي أعطيته لك في إرشادات التمرين ثم
لصقه في ملف contactcomponent.html حتى نتمكن
من مسح العرض الفعلي لـ ContactComponent لدينا بمزيد من التفصيل هنا.
الآن، يمكنك أن ترى أنني قمت بقطع ولصق التعليمات البرمجية
لملف القالب من التعليمات إلى contactComponent الخاص بي.
سنكمل تكامل
ContactComponent في تطبيقنا ثم سننظر في
ما يبدو عليه ContactComponent ثم نعود
وننظر بسرعة إلى هذا الرمز بعد ذلك بقليل.
الآن، لدمج ContactComponent في تطبيقنا الزاوي،
نحتاج إلى تضمين مسار إلى ContactComponent في طرقنا.
لذلك، انتقل إلى ملف routes.ts مباشرة بعد القائمة،
وأنا ذاهب إلى تضمين مسار آخر لكونتاكتكومبوننت وسوف تستخدم
عنوان ورل كما اتصل بنا
والمكون المقابل هو كونتاكتكومبوننت هنا.
لذا، مع هذا، قمنا الآن بدمج ContactComponent
في تطبيقنا ودعونا
نحفظ التغييرات على هذا ومن ثم سنحتاج أيضًا إلى تحديث مكون الرأس وتحديث
رابط في مكون الرأس لمساعدتنا على الانتقال إلى ContactComponent.
لذا، سأقوم فقط بنسخ هذا من القائمة رابط في
شريط أدوات مكون الرأس الخاص بي هناك ثم نسخ ذلك إلى
ContactComponent ثم تحديثه كاتصال بنا.
دعونا حفظ التغييرات على جميع الملفات ومن
ثم إلقاء نظرة على التطبيق الناتج.
الذهاب إلى التطبيق في متصفحنا،
إذا انتقلنا الآن إلى ContactComponent،
يمكننا أن نرى أن تفاصيل ContactComponent يتم عرضها
هنا بين الرأس والتذييل كما نتوقع.
لذلك، داخل ContactComponent،
لدينا عنوان اتصل بنا
هناك ثم بعض معلومات الموقع حيث قمت بعرض العنوان.
لذلك، هذا يشبه العنوان الذي
لدينا في التذييل لذلك أنا لن أشرح أنه
بالتفصيل ثم لدينا جزء آخر هنا حيث نقوم بتضمين خريطة موقعنا.
نحن لن نفعل ذلك في الوقت الحالي،
ونحن في طريقنا إلى مجرد ترك فارغة وبعد ذلك أيضا ترى أن لدي
ثلاثة أزرار التي قمت بتضمينها هنا للاتصال، سكايب، والبريد الإلكتروني.
يتم تنشيط هذه الأزرار الثلاثة في تطبيقنا
وأنا باستخدام زر حصيرة رفعت لتقديم هذه الأزرار الثلاثة.
لذلك، يمكنك أن ترى أن هذه الأزرار تبدو مختلفة
عن الأزرار الأخرى التي قمت بتضمينها في التطبيق الخاص بك هناك.
لذلك، هذا هو عنصر زر أثار من المواد الزاوي لدينا هناك.
لذلك، بعد أن رأيت ContactComponent
وحقيقة أننا قادرون على الانتقال إلى ContactComponent.
الآن، من المكونات الأخرى،
دعونا نلقي نظرة سريعة على
رمز HTML الذي قمنا بتضمينه للقالب الخاص بنا ContactComponent.
الذهاب إلى contactcomponent.html، سترى أن لدينا
عنوان هذه الصفحة المضمنة باستخدام هذا div
هنا و div الثاني داخل هنا مع FxFlex
يتضمن معلومات الموقع ثم هذا داخل معلومات الموقع،
وأنا مرة أخرى تحديد div آخر مما سيسمح لي
لتضمين طرق عرض متعددة في هذا div الآخر هنا.
لذلك، داخل هذا، أنا تحديد
ديف آخر مع عمود تخطيط الآثار وتأثيرات صف طبقة.
لذا، هذه طريقة متداخلة لتحديد وجهات نظر CSS Flex هنا.
لذلك، داخل هذا مرة أخرى،
أنا باستخدام عرض ديف فليكسس 50 بحيث
تحتل نصف ثم فكسفليكسس إزاحة 20 بكسل.
لذلك، سيتم تهجير هذا العرض CSS إلى اليمين بمقدار 20 بكسل لذلك
لدي بعض الهامش هناك ومن ثم لدينا
العنوان المدرج هنا ثم أسفل هنا،
يمكنك أن ترى أنه داخل div آخر،
لدي علامة مع زر رفع حصيرة المرتبطة به.
هذا هو ما يسبب الأزرار التي
لدينا في الجزء السفلي من صفحة الاتصال هناك.
إذاً، ثلاثة منهم هنا
واحد لرقم الهاتف
واحد لسكايب واحد للبريد الإلكتروني هنا وأيضا لاحظ أنني الاستفادة من
الرموز الخط رهيبة لكل واحد منهم ثم
خريطة موقعك في ديف آخر هنا.
لذلك، كل من هذه أرفق داخل هذا div الخارجي الذي يتم تضمينه مرة أخرى داخل div.
لذلك، طريقة متداخلة لتحديد تخطيطات مرنة لأجزاء مختلفة لدينا هنا.
لذلك، هذا هو عن ذلك لكونتاكتكومبوننت.
وقد أدمجنا ذلك الآن في تطبيقنا من صفحة واحدة.
الآن، الذهاب إلى ديشسرفيس.
الآن، في ديشسرفيس جنبا إلى جنب مع طريقة
جيتدايز، وأنا ذاهب لتقديم طريقتين أخريين.
طريقة واحدة تسمى GetDish،
طبق معين ثم سأقوم بتحديد الطبق بمعرف محدد هنا.
لذلك، سيكون المعرف
وهذا من شأنه أن يحدد تعطيني الطبق مع معرف المقابلة لهذا الرقم.
لذلك سيكون ذلك طريقة أخرى سأقوم بإضافتها
وإضافة طريقة أخرى تسمى GetFeatureDish.
لذا، فإن هذا الطبق المميز سوف يستخدم
الخاصية المميزة التي أضفناها
ثم يعيد الطبق الذي تم تعيين الميزة له إلى true.
لذلك، هذه هي الطريقة التي يمكنك اختيار طبق واحد معين ومن ثم جعلها متاحة.
الآن، السبب في أن لدي هذا العلم المميز هو أنه عندما يتم تعيين الميزة إلى true،
سيتم تقديم هذا الطبق الخاص على HomeComponent.
الآن، كيف نختار هذه الأطباق؟
لذلك، دعونا نضيف في التعليمات البرمجية لهذا.
لذلك، بالنسبة لـ getDish،
أحتاج إلى إرجاع شيء من الأطباق الثابتة التي لدي بالفعل هناك.
لذلك، من الأطباق الثابتة،
سأستخدم طريقة جافا سكريبت للقيام بتصفية مصفوفة.
لذا، فإن تصفية صفيف سيساعدني على تحديد
العناصر فقط من المصفوفة التي
تتطابق مع معايير معينة سيتم تحديدها
داخل الفلتر هنا ومن ثم سأعود فقط أول واحد.
الآن، يحدث ذلك عندما أقوم بتحديد معرف،
فإنه سيحدد عنصرًا واحدًا فقط ولكن بعد ذلك سيصبح صفيفًا.
لذلك، من هذا الصفيف، أحتاج إلى استخراج هذا العنصر في هذا الصفيف.
لذلك، هذا هو السبب في أنني أستخدم داخل الأقواس صفر هناك.
لذا، هذا سيساعدني في التعرف على هويته
لذا، كيف يمكنني تصفية الأطباق الخاصة بي؟
لذلك، لكل طبق في قائمتي من الأطباق،
لذلك هذا هو المكان الذي سأستخدم فيه
ميزة أخرى من typescript تسمى وظائف السهم.
وظيفة السهم هي طريقة اختزال لكتابة وظيفة.
لذا، إذا كنت معتادًا على كتابة الوظائف،
بدلاً من كتابة الدالة بشكل متقن
ثم داخل طبق بين قوسين وما إلى
ذلك، يمكنني ببساطة كتابته في الحالات التي تكون فيها الوظيفة بسيطة
جدًا، فمن السهل جدًا كتابة هذا كدالة سهم هنا.
لذا، ما أحدده هنا هو تصفية مجموعة الأطباق واستخراج
تلك العناصر فقط من الصفيف الذي معرف الطبق
لذلك، يتم تحديد كل عنصر هنا من خلال طبق المعلمة هنا.
لذلك، الذي يتطابق معرف الطبق مع
المعرف الذي تم توفيره كمعلمة للطبق.
لذا، بهذه الطريقة سوف تستخرج هذا الطبق المحدد من
هذه الصفيف ثم تعيد هذا الطبق من طريقة getDish هذه.
ساعدتني وظائف السهم في كتابة التعليمات البرمجية بطريقة أكثر بساطة.
إذا كنت لا تحب وظائف السهم،
فيمكنك كتابتها بالطريقة الأكثر تقليدية بالقول،
«طبق الدالة»، ثم من هذا، ستعود dish.id triple يساوي id،
لذلك سيؤدي ذلك إلى إرجاع Boolean.
عندما يواجه المرشح حقيقيًا في الداخل هنا،
سيتم اختيار تلك العناصر من الأطباق في الصفيف.
لذا، هذا هو المكان الذي تأتي فيه معرفتك بجافا سكريبت لصالحك.
لذلك، تحتاج إلى معرفة كيفية
عمل فلتر جافا سكريبت لمساعدتك على فهم كيفية القيام بذلك.
حسنًا، الآن بالمثل بالنسبة للطبق المميز،
سأستخدم طريقة مشابهة للاستخراج من
مجموعة الأطباق الخاصة بي باستخدام مرشح هنا ولكن المرشح الذي
سأقوم بتحديده هنا سيكون مرة أخرى وظيفة السهم هنا.
سوف تعتاد على وظائف السهم وبعد ذلك بمجرد أن تعتاد عليها،
ثم عليك أن تدرك مدى بساطة هم على حق جدا.
لذا، هنا طريقة اختيار لي
هي خاصية dish.featured لأن هذا dish.feature بالفعل منطقية هناك.
لذا، سيساعدني ذلك على إرجاع الطبق المميز.
لذلك، أيا كان الطبق،
وميزة الطبق صحيح.
سيتم تصفية هذا الطبق الخاص من
مجموعة الأطباق وبعد ذلك سيكون هناك يوم واحد فقط.
على أي حال، يجب عليك التأكد من
ذلك بحيث يمكنك تعيين مميزة فقط إلى true لأحد هؤلاء،
ثم أستخدم هذا لأن هذا الفلتر سيعود صفيفًا فرعيًا من مجموعة الأطباق،
لذلك أحتاج إلى تحديد هذا العنصر.
سيكون هناك عنصر واحد واحد هناك في الفهرس صفر.
لذلك، أنا باستخدام مؤشر الصفر لتحديد هذا العنصر وإرجاع
ذلك من الحصول على طريقة طبق مميزة هنا.
لذلك، أن يكمل التحديث إلى خدمة الطبق.
لبناء قالب المنزل لدينا،
ونحن في طريقنا إلى عرض على الصفحة الرئيسية طبق
محدد، والترويج الحالي المحدد من قبل المطعم،
وقائد شركة مختارة من قائمة القراء.
زعيم الشركة التي تظهر على الصفحة الأولى
سيكون جزءا من مهمتك التي تتبع هذا الدرس بالذات.
لكننا سنقوم الآن بتضمين،
لدينا طبق مميز والترويج المميز على الصفحة الأولى.
لذلك، مما يعني أنني بحاجة إلى خدمة الترويج
التي تعيد مجموعة من العروض الترويجية التي تجري من قبل هذا المطعم بالذات.
لذلك، اسمحوا لي أن أضيف في خدمة الترقيات لطلبي.
لذلك، للقيام بذلك، في المجلد المشترك،
سأقوم بإنشاء ملف جديد يسمى promotion.ts.
في العرض الترويج.ts، سأقوم بإنشاء فئة،
ترقية فئة وإرجاع هذا العرض الترويجي هنا.
لذا، ماذا تحتوي فئة الترقية هذه؟
يحتوي على خاصية هوية،
ثم يحتوي على اسم للترويج للمطعم.
على سبيل المثال، العرض يمكن أن يكون مثل بوفيه عطلة نهاية الأسبوع.
أو 10٪ من كل يوم واحد في
وقت الغداء وأشياء من هذا القبيل يمكن أن تظهر على الصفحة الأولى لمطاعمك هناك.
لذلك، اسم ثم سوف تشمل أيضا صورة،
والتي هي أن تكون من نوع سلسلة عنوان ورل الصورة،
ثم التسمية التي ستكون سلسلة.
السعر أيضا سلسلة.
الآن، العمل يعني،
كنت لا ترى لي استخدامها في الوقت الراهن،
ونحن سوف تجلب لهم في الاستخدام في واحدة من التدريبات في وقت لاحق ظهرت منطقية.
لذلك، ترى العلامة المميزة تظهر مرة أخرى في العرض الترويجي أيضًا،
ثم وصف السلسلة.
لذلك، ترى أن الترويج منظم
يشبه إلى حد كبير هيكل الطبق الذي رأيناه في وقت سابق.
لذا، هذا هو صف الترقية هنا.
الآن، جنبا إلى جنب مع فئة الترويج،
وأنا بحاجة إلى إنشاء فئة أخرى أن
تصدير مجموعة من الترويج يقول ثابت مع الترقيات هنا.
لذا هنا، سأقوم باستيراد
فئة الترويج
من ملف.ts الترويجي،
ثم أقوم بتصدير ثابت يسمى الترويج.
لذا، ترى أنني أستخدم بنية مشابهة جدًا للأطباق هنا.
لذا, عليك أن تبدأ في رؤية
أن, هذا الهيكل الذي استخدمناه
في وقت سابق للترقيات للأطباق مفيد أيضا لإعلان الترقيات.
إذا كان لديك بنية مختلفة،
سترى أنه مع القادة، سيكون الهيكل
مختلفًا قليلاً عن كائن JavaScript هنا. الترقيات
الآن، تفاصيل عرض ترويجي محدد أعطيته في التعليمات،
لذا أقترح عليك نسخه ولصقه من
هناك بدلاً من كتابة كل شيء هنا.
لذلك، اسمحوا لي أن المضي قدما ونسخ ولصق
هذا الكائن جافا سكريبت في هذا مصفوفة كائن جافا سكريبت هنا،
لذلك هناك تذهب.
العرض الترويجي يحتوي على كائن واحد فقط في الوقت الحالي.
في المستقبل، يمكننا إضافة المزيد.
عند هذه النقطة، لدي واحد فقط لذلك أضفته هناك،
وسأستخدم ذلك وهذا هو العرض المميز لمطعمي هناك.
هذا هو مجرد ترقية،
لذلك اسمحوا لي أن تحديث تلك الترقيات،
وهذا ما أحتاج.
لذلك، أنا فقط ذاهب لحفظ التغييرات على ملف.ts الترويجية.
بعد ذلك، سأقوم بإنشاء خدمة أخرى تسمى خدمة الترويج.
لذلك للقيام بذلك، دعونا نذهب إلى سطر الأوامر في نوع موجه الأوامر
ng توليد خدمات الاستطلاع/الترويج.
لذا، يتم إنشاء خدمة الترويج هناك.
لذلك، الآن PromotionService هو في المكان.
لذلك، دعونا إضافة في ميزات للترقية.
لذلك، انتقل إلى PromotionService،
ترى أن PromotionService يتم تضمينها الآن في مجلد الخدمات الخاص بك هنا،
لذلك نحن بحاجة إلى إعداد PromotionService.
لذلك، في PromotionService،
سأقوم باستيراد
الترويج من المشاركة/الترويج،
وفئة الترويج، وكذلك استيراد
الترقيات من فئة الترقيات المشتركة/الترقيات هناك.
الترقيات المستمرة من هناك.
الآن، تماما كما كان لدينا لخدمة الطبق،
نحن بحاجة إلى إنشاء ثلاث طرق داخل الترقيات Service.
لذا، ما سأقوم به هو إنقاذ نفسي من المتاعب،
سأذهب إلى dish.service،
ثم قم بنسخ هذه الثلاثة فقط،
ثم لصقها في خدمة الترويج الخاصة بي،
ثم قم بتحرير الشفرة.
حسنا، لذلك من خدمة الترويج،
وأنا بحاجة إلى العودة getPromotions
وهذا هو من نوع الترويج ومن ثم هذا سيعود الترقيات،
ومن ثم الحصول على الثاني سيكون الترويج
الذي يتلقى مرة أخرى معرف العرض
الترويجي، لذلك أنا ذاهب للعودة الترقيات. promo.id هو معرف،
ثم الحصول على عرض ترويجي.
لذلك، يمكنك أن ترى أن هيكل PromotionService يشبه إلى حد كبير
خدمة الصحون وهذا لن يكون نوع الترويج،
وهذا سيعود
الترقيات. مرشح الترويجي وهذا سيكون ترويج.speatures وهذا كل شيء.
بلدي الترقيات الخدمة كلها جاهزة.
الآن، أنا ذاهب للذهاب إلى مكون المنزل، وإعداد ذلك،
بحيث في عنصر منزلي،
وسوف عرض طبق مميز والترويج المميز.
سيتم عرض المميزات/الطبق والميزات/الترويج في
المكون المنزلي باستخدام مكون بطاقة المادة الزاوي.
لذلك، نحن بحاجة أولا الحصول على البيانات في مكون المنزل لدينا،
لذلك هذا ما سنفعله في مكونات المنزل نوع ملف البرنامج النصي هناك.
لذلك، والذهاب إلى مكونات المنزل نوع ملف البرنامج النصي، component.ts المنزل.
هنا، أنا بحاجة لاستيراد الطبق
من المشاركة/طبق وأيضا طبق
المقابلة. الخدمة من الخدمات/dish.service.
حسنا، الآن أنا ذاهب أيضا أن تفعل نفس الشيء للترقيات،
لذلك أنا مجرد الذهاب لنسخ ذلك ولصقه في هنا، ومن
ثم تحرير هذا واحد،
لذلك هذا سيكون الترويج، وهذا من شأنه أن
يكون PromotionService،
ومن ثم الترويج، ومن ثم هذا سيكون PromotionService.
لذلك، مع هذا، لدينا كل من طبق
وطبق الخدمات والخدمات الترويجية المتاحة لنا،
ضمن عنصر المنزل لدينا.
القادمة الآن إلى منشئ.
يتيح الآن حقن الخدمتين هنا،
وجعلها متاحة لتطبيقاتنا أو خدمة الطبق،
وخدمة الترويج التي يتم حقنها هنا.
لذلك، مع هذا، لدينا الوصول إلى كل من الخدمات.
حتى الآن داخل طريقة نغونينيت،
وأنا ذاهب لجلب اثنين من الأطباق المميزة.
لذلك، أود أن أقول هذا.DishService.GetFeatureddish
وأيضا الترويج،
الترقيات و جيتفيتوريدبروميشن.
فقط أن تكون كاملة،
اسمحوا لي أن أعلن الطبق هنا اعتبارا من
نوع طبق والترويج اعتبارا من نوع الترويج هنا.
لذلك، يجب أن يوضح ذلك جميع القيم التي نستخدمها في الداخل هنا.
لذلك، مع هذا، ونحن استكمال التحديث إلى مكونات المنزل لدينا ملف typescript.
دعونا الآن التبديل إلى ملف القالب،
ومن ثم إضافة في ورقتين لعرض الطبق المميز والترويج المميز.
الآن، لهذا، لقد أعطيتك الرمز في التعليمات.
لذلك، أنا فقط ذاهب لنسخ هذا الرمز ولصقه هنا.
أنت تعرف بالفعل كيفية إنشاء بطاقات،
لذلك سوف تكون قادرة على اتباع بسهولة التعليمات البرمجية التي ألصقها هنا.
لذلك، يتم تحديث قالب مكونات المنزل أيضا،
حتى تتمكن من رؤية أنه يحتوي على ورقتين هنا.
لأحد، عرض الطبق والآخر يعرض العرض الترويجي هنا،
ومغلقة داخل div FxLayout هنا.
لذلك، دعونا حفظ التغييرات ومن ثم نلقي نظرة سريعة على طلبنا.
بعد إنشاء خدمة الترويج،
نحتاج أيضًا إلى تضمين خدمة الترويج في AppModule،
وجعلها متاحة لتطبيقنا.
لذا، أنا ذاهب إلى هنا،
ثم استيراد
خدمة الترويج هنا.
بعد ذلك، أعلنت خدمة الترويج
كأحد مقدمي الخدمات
في ملف Appmodule.ts الخاص بي هنا.
لذلك، في ملف AppModule،
أنا بحاجة إلى كل من هذه،
ومن ثم حفظ التغييرات.
الذهاب إلى المتصفح،
يمكنك الآن أن ترى أنه في المتصفح،
المكون الرئيسي يظهر الآن ورقتين،
واحدة للطبق المميز واحدة للترويج المميز هنا.
لذلك، يمكنك أن ترى أن السيارتين معروضة هنا.
يمكنني الآن الانتقال إلى صفحة القائمة،
ثم أيضًا إلى صفحة جهة الاتصال.
لا تزال صفحة «حول» غير موجودة،
وستقوم بملء صفحة «حول» كجزء من مهمتك الثانية.
إلقاء نظرة على نفس التطبيق على حجم شاشة أصغر،
لذلك هذا هو شاشة iPhone 6 Plus.
دعونا ننظر إلى المكون الرئيسي وشاشة iPhone 6 Plus.
يمكنك أن ترى هذا الطبق المميز والترويج المميز على الصفحة الرئيسية هناك.
ثم، القائمة التي رأيناها في وقت سابق،
وأيضا صفحة الاتصال التي يتم عرضها هنا.
لذلك، يمكنك أن ترى أن لدينا الآن تطبيق صفحة واحدة هو أكثر من ذلك بكثير تكوين.
باستثناء حول،
الذي سنفعله في المهمة الثانية.
تغيير بسيط آخر يمكنك القيام به في ملف HTML لمكونات الرأس الخاص بك،
هو أنه جنبا إلى جنب مع توجيه رابط جهاز التوجيه، فإن
Route Angular يدعم أيضًا توجيهًا آخر يسمى RouteLinkActive.
هذا يسمح لنا بتطبيق بعض الطبقات على عنصر معين هنا.
لذلك، في هذه الحالة،
إذا أصبح هذا الرابط نشطًا من أي شيء أحده هنا،
فسيتم تطبيقه كفئة لهذا العنصر المحدد هناك.
لذلك، سأقوم بتحديد فئة تسمى نشطة.
حتى هنا، أنا تحديد روترلينككتيف مع نشط.
لذا، إذا قمت بتعريف فئة CSS تسمى نشطة،
فسيتم تطبيق الفصل على هذا الرابط،
كلما تم عرض هذا العرض الخاص على صفحة التطبيقات هنا.
سأقوم بنسخ نفس الشيء وتطبيقه على جميع الأزرار المتبقية،
حيث قمت بتعريف رابط جهاز التوجيه بالفعل.
لذلك، سأقوم بتطبيق فئة RouterLinkActive،
إلى المنزل، والقائمة والاتصال بنا.
الآن، هذا يعني أيضًا أنه يجب عليّ تحديد فئة CSS نشطة.
لذلك، للقيام بذلك، سأذهب إلى ملف مكونات الرأس SESS،
ثم حدد فئة نشطة هنا،
لذلك سأحدد الطبقة النشطة هناك.
لتحديد الفئة النشطة،
سأقوم بإضافة متغير لون آخر هنا يسمى background-moredark.
ثم، اللون المقابل هو 4527A0،
وهذا هو نسخة أغمق من هذا اللون الداكن الخلفية، 4527A0.
ثم، بالنسبة لبلدي النشط،
ما سأقوم به هو، من الطبقة النشطة،
وسوف تسمح للفئة تحديد خلفية،
تعيين خلفية
هذا العنصر إلى لون الخلفية أكثر ظلام.
لذلك، عندما يتم تحديد هذا العرض المحدد وعرضه في الصفحة،
فسيتم تطبيق هذه الفئة النشطة على
علامة A المعينة
هناك بواسطة التوجيه النشط لرابط الموجه الذي قمنا بتطبيقه هنا.
الآن، ما هو التغيير الذي يسببه هذا على صفحتنا الإلكترونية.
الآن، والانتقال إلى صفحة الويب الخاصة بنا،
سنرى ما يقدمه هذا على صفحتنا الإلكترونية.
الذهاب إلى طلبنا،
ترى الآن أنه عندما نكون في
وجهة نظر المنزل في المكون الرئيسي التي يتم عرضها هنا، وجهة نظر المقابلة.
بعد ذلك، يحتوي الزر الصفحة الرئيسية هنا على لون خلفية مختلف يتم
تطبيقه لأنه تمت إضافة الفئة النشطة لأننا
نحدد RouterLinkActive إلى نشط هنا.
لذلك، يتم تطبيق هذه الفئة.
وبالمثل، عند تحديد القائمة
، سترى أن القائمة يتم تمييزها في الرأس،
ويتم عرض القوائم هنا،
وبالمثل للمحتوى.
الآن، وهذا يتيح لنا أن نرى في لمحة عن أي دفع معين عرض الواقع الافتراضي،
في تطبيق صفحة واحدة لدينا.
لذلك، هذا هو تعزيز العرض قليلا إضافية لواجهة المستخدم،
التي تمكننا من رؤية بعض الميزات المثيرة للاهتمام.
على الرغم من ذلك، فإنه لا يضيف الكثير إلى وظائف التطبيق،
ولكن فقط إضافة بعض الميزات الصغيرة التي ستكون إضافة مفيدة إلى التطبيق الخاص بك.
لذلك، مع هذا، ونحن استكمال هذا التمرين.
في هذا التمرين، عملنا
على دمج مكون الاتصال في تطبيق صفحة واحدة.
قمنا أيضًا بتصميم بضع بطاقات قمنا بتضمينها في المكون المنزلي،
وأضفنا في بعض الميزات الجديدة لتطبيقنا.
هذا هو الوقت المناسب لك لحفظ التغييرات في مستودع Git الخاص بك مع الرسالة،
الجزء 1 من تطبيق الصفحة الواحدة.