دعونا الآن نواصل العمل
على تطبيق صفحة واحدة الذي قمنا بتطويره في تدريباتنا.
حتى الآن، قمنا بدمج مكون المنزل،
مكون القائمة، ومكون الاتصال في تطبيق صفحة واحدة لدينا.
يتم استخدام مكون تفاصيل الطبق حاليًا في الجزء السفلي من مكون القائمة.
لذلك، عند النقر على أي من العناصر في
القائمة، يتم عرض تفاصيل الطبق أدناه في القائمة.
الآن، سنستفيد من دعم آخر تقدمه وحدة التوجيه Angular،
والذي يمكننا من تحديد مسار بمعلمة مضمنة في تعريف المسار.
بهذه الطريقة، يمكننا تمرير المعلومات إلى مكون آخر،
ومن ثم من هناك،
عرض المعلومات في المكون الآخر.
كيف يعمل هذا؟
دعونا نتعلم ذلك من خلال القيام بهذا التمرين.
لذلك، والعودة إلى طلبنا،
في هذا التطبيق، عندما تنظر إلى القائمة،
عند النقر على أي عنصر في القائمة،
يتم عرض تفاصيل العنصر المحدد أدناه في القائمة.
الآن، أود أن فصل وجهة نظر تفاصيل
هذا الطبق معين في وجهة نظر منفصلة خاصة بها.
عندما أنقر على أي واحد من هذه،
أريد أن أكون قادرا على عرض تفاصيل الطبق،
وتحديدا في وجهة نظر في هذا التطبيق.
ولتحقيق ذلك، سنستفيد، كما قلت،
بمعلمات الطريق
لتمكيننا من دعم هذا النوع من السلوك في تطبيقنا.
كيف يمكننا فعل ذلك؟
دعونا نفعل ذلك عن طريق البدء بتحديد مسار جديد بمعلمة هنا.
للاستفادة من مكون تفاصيل الطبق،
سوف نذهب إلى الطرق،
ومن ثم تحديد مسار جديد بعد القائمة هنا.
انظر إلى الطريقة التي يتم بها تعريف الطريق هنا.
لذا، هذا هو المسار، dishdetaille.
لذا، فإن تفاصيل الطبق هذه جزء من مكون تفاصيل الطبق.
لذلك، لديها وجهة نظر خاصة بها.
الآن، أريد أن أكون قادرا على الانتقال إلى هذا العرض،
ولكن مع معرف المعلمة،
لأن عرض تفاصيل الطبق هذا قد يعرض أي واحد من الأطباق في القائمة الخاصة بي.
لذلك، أريد أن أكون قادرًا على عرض طبق محدد في تفاصيل الطبق.
الآن، هذا الطبق المحدد سيكون له هوية،
وأريد أن تمرير هذا الهوية إلى بلدي مكونات مفصلة طبق،
بحيث يمكن أن تقدم تفاصيل ذلك الطبق معين.
لذلك، في جهاز التوجيه Angular،
فإنه يدعم تمرير المعلمات عن طريق تحديد معلمات المسار مثل هذا،
في تعريف جهاز التوجيه نفسه.
لذلك، داخل المسار،
إذا قلت القولون،
بحيث القولون يمكن أن يتبع اسم الذي سيكون بمثابة معلمة الطريق.
لذلك، في هذه الحالة، سأستخدم اسم المعلمة كمعرف.
يشير هذا المعرف إلى معرف الطبق الذي قدمناه بالفعل لكل من أطباقنا.
الآن، هذا سوف يأخذني إلى عنصر تفاصيل الطبق.
لذلك، سنضيف في هذا الطريق الجديد إلى تعريف الطريق الزاوي لدينا هنا.
احفظ التغييرات.
الآن، في مكون القائمة،
لذلك عندما أفتح ملف قالب مكونات
القائمة، في مكون القائمة،
أقوم بعرض الطبق في الأسفل هنا.
لذلك، أنا لا أريد أن أفعل ذلك.
لذلك، سأقوم بحذف هذا الجزء من قالب مكونات القائمة الخاص بي.
بدلا من ذلك، ما أدركه هو أن هناك،
وأنا قادرة على الوصول إلى طبق معين.
لذلك، عندما يتم النقر على الطبق،
بدلا من القيام بذلك انقر هنا،
لذلك أنا ذاهب لإزالة هذه النقر هنا، وبدلا من ذلك،
أنا ذاهب لتحديد معلمة جديدة هنا تسمى RouterLink.
سترى استخدام جهاز التوجيه (routerLink) هنا.
الآن، يأخذ هذا RouterLink في القيم التي يمكنك توفيرها في القالب الخاص بك مثل هذا.
لذلك، يمكنك توفير ذلك كمصفوفة هنا.
داخل الصفيف، يمكنك توفير جزأين من صفيف.
لذا، تفاصيل الصحون
لذلك، رأيت أنه عندما حددت الطريق، قلت «/dishdetail/: id».
لذا، سيمر جهاز التوجيه Angular في أي معلمة أقوم بتوفيرها
هنا كجزء من الجزء الثاني من عنوان URL هذا هناك.
لذلك، الآن، جنبا إلى جنب مع تفاصيل الطبق،
وأنا ذاهب لبناء بلدي روترلينك باستخدام تفاصيل الطبق،
وأيضا معرف الطبق هنا.
لذا، يشير هذا الطبق إلى الطبق
المحدد الذي اخترته من مجموعة الأطباق هنا.
لذا، بطاقة هوية الطبق،
لدي إمكانية الوصول إليها هنا.
لذلك، سأستخدم ذلك كالجزء الثاني داخل هذه المجموعة من المعلمات،
التي سأنتقل إليها لبرنامجي RouterLink هنا.
لذا، إذا قمت بتعريفه على هذا النحو،
فعند النقر على هذا العنصر المعين في قائمتي،
فإن ذلك المفصل،
سيتم تمرير معرف الطبق، مع هذا dishdetaille، كرابط جهاز التوجيه.
لذا، ستصبح هذه المعلومات متاحة الآن من خلال
أجهزة التوجيه Angular الخاصة بي إلى مكونات تفاصيل الطبق الخاصة بي.
لذلك، يقوم جهاز التوجيه بتمكين مكون تفاصيل الطبق لاسترداد هذه القيمة،
معرف الطبق، من المسار الزاوي عند تمرير هذه المعلومات إليه.
كيف نفعل ذلك؟ لذلك،
نحن بحاجة للذهاب إلى مكون تفاصيل الطبق وإصلاح ذلك حتى لتلقي هذه المعلومات.
لذلك، بعد إجراء هذه التغييرات على مكون القائمة،
دعونا الآن التحول إلى مكون تفاصيل الطبق.
داخل مكون تفاصيل الطبق،
ترى أنه في الوقت الحالي،
كنت أتلقى الطبق كمدخل هنا.
أنا لم يعد ذاهب لتلقي الأطباق والمدخلات.
لذلك، سأترك ذلك على هذا
النحو، ببساطة طبق.
لم أعد بحاجة إلى المدخلات لأنني لا تمر في هذه المعلومات باستخدام الطبق،
داخل أقواس مربعة التي قمت بتضمينها في مكون القائمة الخاص بي.
بدلاً من ذلك، هذه المعلومات حول الأطباق المحددة القادمة من خلال جهاز التوجيه Angular.
كيف يمكنني الوصول إلى بطاقة هوية الطبق تلك؟
لذا، لفعل ذلك،
أذهب إلى هنا
في هذا التطبيق، وأنا ذاهب لإضافة في اثنين من الواردات أكثر هنا،
واحد منهم يسمى بارامز.
لذا، هذا Params يعطيني الوصول
إلى معلمات جهاز التوجيه المتوفرة عندما أدخل.
لذلك، هذا هو من جهاز التوجيه الزاوي، بارامز،
وأيضا واحد آخر أن أحتاج هو الموقع.
يتيح لي الموقع تتبع موقع
صفحتي في تاريخ المتصفح الخاص بي.
لذلك، سيكون ذلك مفيدًا بالنسبة لي للتنقل مرة أخرى من تفاصيل الطبق الخاص بي عندما أحتاج إلى ذلك.
سوف تراني أستعمل هذا بعد قليل
لذا، شيئين أحتاج إلى استيرادهما: Params والموقع.
سنرى كيف نستفيد من هذين في طلبنا.
لذلك، جنبا إلى جنب مع هذا،
سوف ندخل وهنا، لمنشئ،
والآن نلاحظ أن قيمة الطبق ليست متاحة الآن من عنصر القائمة بلدي.
ولكن بدلا من ذلك، لا بد لي من الذهاب صراحة وجلب هذا من ديشسرفيس.
لذلك، أنا ذاهب لاستيراد
ديشسرفيس أيضا إلى بلدي عنصر التفاصيل طبق.
خدمة الصحون هنا
لذلك، هذا سيمكنني من الذهاب وجلب طبق معين من خدمة الأطباق.
لذلك، تذكر أن لدينا بالفعل
طريقة GetDish وخدمة الطبق التي يمكننا استخدامها.
الآن، الشيء التالي المهم بالنسبة لنا هو الحصول على
عقد من معرف الطبق. الآن
، كيف يمكننا الحصول على معرف الطبق.
الآن، أنا بحاجة لجعل كل هذه الخدمات متاحة،
لذلك سأقول خدمة طبق.
ثم، والآخر هو الموقع.
لذلك، الموقع هو خدمة أخرى متاحة لي.
لذلك، سيتم استخدام كل من هذه داخل طلبي.
لذلك، عندما يتم تهيئة هذا المكون الطبق،
ثم في هذه المرحلة في ngonInit،
يمكنني الذهاب وجلب المعلومات حول طبق معين من Params.
إذاً، كيف نفعل ذلك؟ لذلك، نحن نترك الهوية
، لذا، هذا هو المكان الذي سأجلب فيه الهوية،
لذا أود أن أقول بالإضافة إلى هذا.
أيضا لجلب قيمة المسار،
أحتاج إلى حقن خدمة أخرى تسمى خدمة ActivatedRoute.
هذا جزء من أجهزة التوجيه الزاوي.
لذلك توفر لي خدمة ActivatedRoute هذه الوصول إلى الطريق هنا.
لذلك، أود أن أقول،
لذلك جنبا إلى جنب مع ديشسرفيس أنا أيضا بحاجة إلى تحديد واحد آخر يسمى
كالطريق الذي سيكون خدمة أكتيفاتدروتي هنا.
لذا، كل هؤلاء الثلاثة سيكونون متاحين لي
لذا هناك، يمكنني أن أسأل عن
هذا الطريق، لقطة، بارامز.
هذه Params هي مصفوفة
يمكنني فهرستها باستخدام المعرف كقيمة، لذلك معرف Params،
وهذا يجلب لي المعرف من المعلمة.
لذلك، عندما أقوم بتعريف عنوان URL هذا،
سيتم تعريف عنوان URL لهذا بأنه Dishdetaille.
على سبيل المثال، DishDetaille 0،
DishDetaille 1، DishDetaille 2
لذلك، هذه هي الطريقة التي سيتم تعريف عناوين URL لهذه المكونات هناك.
لذا، تلك القيمة التي سأحضرها إلى هنا
الآن، مرة واحدة أحصل على عقد من فكرة الطبق، ثم أستطيع أن أقول،
هذا الطبق يساوي ديشسرفيس
والحصول على طبق و جيتديش سوف تأخذ معرف كمعلمة هنا.
لذلك، مع هذا، عندما أنقر على طبق في مكون القائمة الخاص بي، فإن
هذا الرابط الذي لدي رابط جهاز التوجيه الذي قمت بإعداده هناك،
سيمر في معرف الطبق إلى جهاز التوجيه الخاص بي كـ RouterParameter،
والتي ستصبح متاحة لي في
مكون DishDetail الخاص بي عن طريق الوصول إلى خدمة ActivatedRoute هنا.
لذلك، بمجرد الحصول على عقد من ذلك،
ثم يمكنني استخدام هذه القيمة للاستعلام عن الطبق هنا.
الآن، هذه ليست الطريقة الكاملة للقيام بالأمور.
في وقت لاحق في الوحدة التالية،
سنستخدم شيئًا يسمى JavaScript التفاعلي.
ثم، عند هذه النقطة، سأعود لإعادة تعريف هذا
بطريقة مختلفة بحيث يمكن لمكون DishDetail الخاص بي تتبع
أي تغييرات أجريها على عنوان URL الخاص بي
وتغيير المعلومات التي يتم عرضها بواسطة هذا المكون تلقائيًا.
سنأتي إلى ذلك في واحدة من التدريبات اللاحقة في الوحدة التالية،
ولكن هذا يعمل بشكل جيد في الوقت الحالي لذلك نحن ذاهبون لاستخدام هذا.
بالإضافة إلى ذلك، الآن عندما أذهب إلى تفاصيل الطبق
أريد أن أكون قادرا على العودة إلى القائمة من الطبق.
لذلك، أنا ذاهب لإضافة في زر العودة إلى بطاقتي زر العودة إلى بطاقتي،
والتي عند الضغط عليها سوف يأخذني مرة أخرى إلى الموقع السابق في المتصفح الخاص بي.
لذلك، للقيام بذلك أنا ذاهب إلى إضافة في طريقة هنا تسمى غوباك،
والتي سوف تفعل أساسا الاستفادة
من خدمة الموقع التي قمت بتضمينها هنا.
توفر خدمة الموقع طريقة تسمى «العودة» تسمح لي
بالعودة إلى العنصر السابق في سجل المستعرض.
لذلك، وبهذه الطريقة، سوف انتقل مرة أخرى إلى القائمة من التفاصيل هنا.
لذلك، تتم إضافة طريقة GoBack هذه هنا.
الآن، نحن بحاجة للذهاب وإصلاح مكون ديشديتايل هنا.
لذلك، في ملف قالب مكونات DishDetail،
هنا لدينا اثنين من الأزرار التي هي مثل وزر مشاركة.
أنا ذاهب لإضافة في زر واحد أكثر هنا.
لهذا الزر، أود أن أضيف في،
إذا تم النقر على هذا الزر،
وهذا سيؤدي إلى استدعاء إلى طريقة غوباك التي
قمت بإضافتها للتو إلى بلدي dishDetail component.tsfile.
لذلك، هذا سيكون زر العودة هناك.
بينما نحن في ذلك،
قد نقوم أيضًا بإصلاح روابط مكونات تذييل الصفحة أيضًا.
لذلك، والذهاب إلى footercomponent.htmlfile في الجزء السفلي هنا حيث لدينا هذه الروابط،
وأنا ذاهب لإضافة في RouterLink هنا مع
المعلمة الرئيسية لأول واحد،
ومن ثم القائمة للثانية،
والاتصال بنا لثالث واحد في تذييل هنا.
دعونا حفظ التغييرات.
الذهاب إلى التطبيق الخاص بك،
إذا قمت الآن بالنقر فوق القائمة،
يتم عرض عناصر القائمة هنا.
إذا نضغط على أي عنصر من عناصر القائمة،
ستلاحظ أن تفاصيل الطبق تظهر في عرض منفصل هنا.
هذه التفاصيل، كما ترون،
وهذا هو بالضبط ما تم عرض مكون DishDetaille
في وقت سابق، ولكن في الجزء السفلي من القائمة في مكون القائمة،
لدينا الآن أن عرض في عرض منفصل.
الآن، هذا المكون DishDetaille،
الآن يمكنك العودة إلى القائمة عن طريق النقر على زر العودة.
لذلك، عند النقر على زر رجوع،
كنت مرة أخرى في القائمة.
عند النقر على عنصر آخر،
ترى أن تفاصيل هذا البند معين يتم عرضها هنا،
وبالمثل بالنسبة للثالث أيضا وبعد ذلك يمكنك العودة.
الآن، عند النقر على أي من هذه العناصر،
لاحظ قيمة عنوان URL في شريط العناوين.
لذا، هذا هو المضيف المحلي 4،200 شرطة مائلة DishDetail 0.
هذا الصفر هو معرف هذا الطبق.
لذا، يتم تمرير هذه القيمة،
وهذه هي الطريقة التي يتم بها عرض مكون DishDetaille هنا، ارجع.
عند النقر على العنصر الآخر،
يمكنك أن ترى أنه الآن في عناوين URL يقول، DishDetail شرطة مائلة 1.
وبالمثل، بالنسبة للرابع،
تقول DishDetail شرطة مائلة 3، وهكذا.
لذا، فإن قيمة المعلمة هذه هي التي تشير إلى
مكون DishDetaille الذي
يجب أن يظهر طبق معين بواسطة مكون DishDetaille.
هذا هو ما يتم استخدامه من قبل مكون DishDetail لاسترداد المعلومات حول
هذا الطبق المحدد من DishService باستخدام الأسلوب getDish،
ومن ثم يتم عرض هذه المعلومات في طريقة عرض مكون DishDetail.
لذلك، الآن في هذا التمرين،
تعلمنا كيف يمكننا استخدام RouteParameters لتمرير المعلومات إلى مكون،
ثم يحصل المكون على الوصول إلى المعلمة ثم يستخدم هذا RouteParameter
لتحديد الطريقة
التي يعرض بها العرض أو جلب المعلومات وتقديم العرض وفقًا لذلك .
مع هذا، نكمل هذا التمرين.
لقد انتهينا الآن تقريبًا من إنشاء تطبيق صفحة واحدة
لتطبيق المطعم الذي كنا نعمل عليه حتى الآن.
هذا هو الوقت المناسب بالنسبة لك للقيام git الالتزام مع الرسالة،
جزء تطبيق الصفحة الواحدة 2.