[MUSIC]
باستخدام جهاز التوجيه الزاوي، تعلمنا بالفعل كيف يمكننا التنقل
من عرض إلى آخر باستخدام توجيه ارتباط جهاز التوجيه لتحديد الرابط.
وأيضا وحدة جهاز التوجيه، مما يتيح لنا مواصفات المسار،
للانتقال إلى وجهات نظر المكونات المختلفة.
الآن، دعونا نأخذ مثالا على مكون dishdetaille.
حتى الآن، تم عمل مكون dishdetaille
من خلال تلقي تفاصيل الطبق المحدد الذي يحتاج إلى عرضه من مكون القائمة.
ولكن تم تسهيل ذلك لأن مكون dishdetaille
يحتوي على خاصية كانت ترسل القيمة.
ثم كنا نستخدم ديكور الإدخال
للمتغير داخل مكون dishdetails للحصول على هذه القيمة التي
تم تمريرها من مكون القائمة.
الآن، عندما يتم توجيه هذه المكونات إلى استخدام جهاز توجيه،
لم يعد هذا الاتصال بين المكونات موجودًا.
لذلك نحن بحاجة إلى الاستفادة من جهاز التوجيه الزاوي لتكون قادرة على تمرير
المعلومات من مكون واحد إلى المكون الآخر.
وعادة ما يتم ذلك في شكل معلمات.
المعلمات التي يمكن تحديدها إما كمعلمات المسار،
ونحن سوف تتعلم قليلا في وقت لاحق، أو معلمات الاستعلام.
لذلك بالنسبة إلى جهاز التوجيه الزاوي، ما تعلمناه حتى
الآن هو أن المسارات كلها محددة كعنوان URL.
لنفترض أن لديك حاجة لتمرير قيمة معلمة من مكون إلى
مكون آخر.
إذن كيف نفعل ذلك؟
الآن، الطريقة الوحيدة للتواصل بين المكونات
هي باستخدام رابط جهاز التوجيه.
و/أو
لاستخدام وحدة جهاز التوجيه للقيام بالتنقل من مكون إلى مكون آخر.
الآن، هذا هو المكان الذي
تمكننا فيه القدرة على تحديد قيم المعلمات داخل عنوان URL لمكون، مسار مكون، من تمرير هذه المعلومات.
لذلك، على سبيل المثال، إذا أردنا أن نكون قادرين على عرض طبق
مع معرف 42 في مكون ديستيل.
إذا كان لدينا القدرة على تحديد شيء مثل/dishdetail/42.
ثم دع dishdetails يلتقط الرقم 42 من عنوان URL مباشرة.
ثم قمنا بتيسير آلية لنقل هذه المعلومات
إلى مكون آخر عندما نتنقل إلى المكون الآخر.
هذا هو ما يشار إليه في وحدة التوجيه الزاوي كمعلمة مسار.
كيف تعمل معلمة المسار؟
لذلك عند تحديد معلمة مسار في تعريف المسار،
يتم تحديد معلمة المسار هذه باستخدام رمز مميز.
لذلك عند تحديد المسار في مواصفات المسار
للمسارات، يمكنك تحديد مسار مثل هذا.
لذلك يمكنك أن تقول، dishdetail/:
id، حيث يصبح المعرف الرمز المميز الذي يحمل
معلمة المسار إلى المكون المحدد.
مكون dishdetaille في هذا المثال.
بهذه الطريقة، يمكنك تحديد معلمة مسار في المسار.
ومن ثم من موقع آخر، يمكنك تمرير المعلمة
إلى المكون المحدد الذي يحتاج إلى هذه المعلمة.
مكون dishdetaille في هذا المثال.
الآن، السؤال المهم التالي الذي سيطرح في عقلك هو،
كيف يمكننا تمرير هذه المعلمة الطريق؟
الآن، عندما تفكر في ذلك، عند التنقل من خلال مكون dishdetaille.
أنت قادم من مكون آخر إما عن طريق النقر على رابط أو باستخدام
شيء يسمى وظيفة التنقل مثل وحدة المسار التي توفرها لنا.
سننظر في كلتا الطريقتين للانتقال إلى مكون معين.
الآن، إذا كنت بحاجة إلى تحديد معلمة المسار، عند تحديد الرابط،
تذكر أننا كنا نحدد الرابط باستخدام
توجيه رابط الموجه في ملفات القالب الخاصة بنا.
الآن، إذا كنت ستقوم بتحديد هذا في ملفات القالب،
فإن رابط الموجه يأخذ أيضًا في صفيف كما نرى.
صفيف معلمة ارتباط،
حيث يمكنك تحديد المعلمة التي يتم نقلها بشكل صريح.
لذلك، على سبيل المثال، في هذا المثال الذي تراه هنا، نحن نحدد،
ثم تقوم بعمل ngFor.
لذلك كنت حلقات من خلال مجموعة من كائنات جافا سكريبت في
صفيف كائن جافا سكريبت.
ثم، عند تحديد ارتباط جهاز التوجيه.
لذلك داخل هناك، يمكنك تحديد رابط جهاز التوجيه.
ولكن الآن، محاطة بأقواس مربعة.
وهذا سوف يستغرق في قيمة مثل هذا يحتوي على مصفوفة معلمة ارتباط.
حتى هنا، يمكنك تحديد أجزاء مختلفة من معلمة الرابط.
وسوف ينضم جهاز التوجيه الزاوي إلى هذه معا لتشكيل عنوان URL الفعلي.
حتى هنا، يمكنك أن ترى أن الجزء الأول من معلمة الارتباط
محدد كسلسلة هنا، لذلك /dishdetaille هنا.
ولكن يتم تحديد الجزء الثاني كقيمة يتم الحصول عليها
من الطبق.
وهو الطبق، كائن جافا سكريبت من مصفوفة كائن جافا سكريبت هنا.
لذلك كل طبق سوف يحمل dish.id،
لذلك يمكن تحديد dish.id
كواحدة من القيم داخل صفيف معلمة الارتباط هذا هنا.
لذلك عند النقر على هذا، بالنسبة للطبق المحدد،
سيتم استبدال هذا الطبق. id بمعرف محدد للطبق.
لذلك، على سبيل المثال، إذا كان المعرف 42، فسيتم استبدال هذا بـ 42.
لذلك عندما يتلقى جهاز التوجيه الزاوي ارتباط جهاز التوجيه هذا،
فإنه سيتم بناء عنوان ورل ك/disdetail/42.
ال 42 يجري قيمة dish.id في هذه المرحلة.
لذلك هذه هي الطريقة التي يمكنك تمرير في المعلمة.
الجزء الثاني من السؤال، بالطبع،
هو كيف يسترد المكون هذه القيمة من معلمة الارتباط؟
التي سنتحدث عنها في الشريحة التالية.
وهناك طريقة أخرى يمكن أن تسبب هذا التنقل للمكون الآخر
هي أيضا استخدام طريقة تسمى التنقل التي توفرها وحدة جهاز التوجيه (router).
حتى تتمكن من القول، هذا.router.naviation.
لذلك يمكن تضمين هذا في شفرة TypeScript أو
شفرة JavaScript الخاصة بك لتسبب التنقل تلقائيًا إلى الآخر.
لذلك يمكن تضمين هذا داخل طريقة
تضمينها في رمز TypeScript المكون الخاص بك.
ويمكن استدعاء ذلك من القالب الخاص بك.
قل، على سبيل المثال، عن طريق النقر على رابط هناك.
حتى داخل هناك في التعليمات البرمجية، يمكنك تضمين بيان مثل هذا،
هذا.router.naviation.
وتأخذ طريقة التنقل هذه نفس مصفوفة معلمة الارتباط
مثل قيمة المعلمة.
لذلك سيمكن هذا أيضًا من توفير هذه المعلومات إلى جهاز التوجيه الزاوي
بحيث يمكنه الانتقال إلى المكون الآخر.
الآن، دعونا نذهب إلى الجانب الآخر من هذه المعادلة.
كيف يقوم أحد المكونات، مثل مكون
dishdetails في هذا المثال، باسترداد هذه القيمة المحددة كرمز مميز في رابط عنوان URL هناك؟
الآن، هذا هو المكان الذي توفر فيه مكتبة جهاز التوجيه الزاوي
خدمة تسمى خدمة ActivatedRoute.
يمكن الاستفادة من خدمة ActivatedRoute هذه لتكون قادرة على استرداد
هذه القيم.
الآن، على وجه الخصوص، لتسهيل استرجاع هذه المعلمة،
توفر خدمة ActivatedRoute ثلاثة أشياء مختلفة.
على سبيل المثال، يوفر هذا الأسلوب لاسترداد عنوان URL.
الذي يمكن ملاحظته لمسار المسار.
الذي يتم تمثيله كمجموعة من السلاسل لكل مسار مسار مسار.
لقد واجهت هذه الكلمة يمكن ملاحظتها هنا.
في هذه اللحظة، تمسكي بهذه الكلمة.
سنعود، وننظر إلى ما يمكن ملاحظته في الوحدة التالية.
ولكن في الوقت الحالي، ما أدركناه هو أن
خدمة ActivatedRoute توفر هذه الملاحظة.
وبالمثل، توفر خدمة ActivatedRoute أيضا آخر يمكن ملاحظتها يسمى params.
هذه المعلمات يمكن ملاحظتها يجعل متاحة لمكون
قيم المعلمات التي يتم تمريرها في كمعلمة المسار.
لذا فإن هذه المعلمات التي يمكن ملاحظتها هي التي سنستخدمها
لاسترداد هذه القيمة داخل مكون dishdetaille.
سترى الطريقة الدقيقة للقيام بذلك
في التمرين الذي يتبع هذه المحاضرة.
وبالمثل، يمكنك أيضًا تمرير معلمات الاستعلام إلى مكون آخر.
الآن، نحن لن نتعامل مع مثال لمعلمات الاستعلام في الوقت الحالي.
ولكن في وقت لاحق، قد نواجه مثالا على كيفية تمرير
معلمات الاستعلام من خلال خدمة ActivatedRoute إلى مكون آخر.
مع هذا الفهم، دعونا المضي قدما في التمرين التالي.
سنستمر في تطوير تطبيق صفحة واحدة.
ثم قم بتمكين استخدام معلمة مسار لتمريرها
في معرف الطبق إلى مكون dishdetaille.
بحيث يمكن لمكون dishdetaille، بدوره، استخدام هذا المعرف للاستعلام عن خدمة الطبق.
للحصول على تفاصيل هذا الطبق المحدد الذي من
المفترض أن يعرض ضمن وجهة نظرها.
[ موسيقى]