مقدمة
Angular تطبيقات شائعة جدًا هذه الأيام. وهي مبنية على مفهوم Single Page Applications (SPA). في مثل هذه التطبيقات، يختلف التوجيه عبر صفحات الويب عن المواقع التقليدية نظرًا لاستخدام المكونات. في Angular، تحتاج إلى استخدام RouterLink للتنقل للتوجيه عبر التطبيق. RouterLink هو توجيه (directive)، ويوفر Router.navigate و Router.navigateByURL طرقًا للتنقل عبر فئات المكونات.
في هذا البرنامج التعليمي، سنقوم بـ إلقاء نظرة على RouterLink, Router.navigate, و Router.navigateByURL جنبًا إلى جنب مع كود أمثلة.
RouterLink
في HTML، يتم إدراج الرابط عادةً باستخدام علامة الإرساء (anchor tag) <a> كما هو موضح أدناه:
|
1 2 3 |
<a href="/sample"> رابط HTML تجريبي. </a> |
سيقوم هذا الرابط التجريبي بتوجيه المستخدم إلى صفحة /sample . ومع ذلك، كما ذكرنا أعلاه، فإن تطبيق الصفحة الواحدة (SPA) لا يحتوي على صفحات مختلفة للربط بها. بدلاً من ذلك، يحتوي على طرق عرض أو مكونات مختلفة لعرضها للمستخدم.
إذا كنت بحاجة إلى السماح للمستخدم بالتنقل وتغيير طريقة العرض، فسيتعين عليك استخدام توجيه RouterLink بدلاً من href:
|
1 2 3 |
<a routerLink="/users/example"> رابط يستخدم سلسلة نصية. </a> |
هذا المثال لـ RouterLink سيقود المستخدم إلى المكون الموجود في /users/example. يمكن أيضًا تمرير أجزاء عنوان URL المختلفة في مصفوفة كما في المثال التالي:
|
1 2 3 |
<a [routerLink]="['/', 'users', 'example']"> مثال على رابط يحتوي على مصفوفة من العناصر. </a> |
تم تنسيق هذين المثالين بطريقة مختلفة، ولكن سيتم توجيههما لا يزال إلى نفس المكون في /users/example.
-
المسار النسبي
يسمح RouterLink بتحديد عناوين URL النسبية. يمكننا استخدام ../ للانتقال إلى مستويات أعلى من التنقل. فيما يلي كيف يمكننا تحقيق ذلك:
|
1 2 3 |
<a [routerLink]="['../', 'parent', 'posts']"> رابط ينتقل بمستوى إلى الأعلى. </a> |
في المثال أعلاه، إذا كان المستخدم في /users/posts، فإن التنقل سيأخذ المستخدم إلى /posts/parent. يمكنك أيضًا تحديد عناوين URL نسبيًا باستخدام ./, ../، أو حتى بدون شرطة مائلة بادئة إذا لزم الأمر.
-
المعلمات (Parameters)
قد تكون هناك سيناريوهات تحتاج فيها إلى تمرير البيانات بين المسارات. مثال بسيط هو عندما يملأ المستخدم النموذج وتأخذه إلى الجزء التالي من النموذج لمزيد من التفاصيل.
لتمرير المعلمات، يتم تمرير كائن يغلف البيانات في قائمة أجزاء عنوان URL:
|
1 2 3 |
<a [routerLink]="['/', 'users', {display: 'sample'}, 'xyz']"> رابط مع معلمة. </a> |
أعلاه، سيقوم الـ Router بالتنقل إلى /users;display=sample/xyz.
-
المنافذ المسماة (Named Outlets)
منافذ التوجيه المسماة هي ببساطة منافذ توجيه ذات أسماء. دعونا نلقي نظرة على الكود الخاص بذلك:
|
1 2 3 |
<a [routerLink]="['/', 'users', { outlets: { side: [xyz] } }]"> رابط مع منفذ جانبي. </a> |
في هذا المثال، سيتم وضع الجزء xyz في المنفذ المسمى side. يمكننا أيضًا تحديد منافذ مسماة متعددة كما يلي:
|
1 2 3 |
<a [routerLink]="['/', 'users', { outlets: { first: ['abc'], second: ['xyz'] } }]"> رابط مع المنفذين الأول والثاني. </a> |
سيؤدي هذا إلى استبدال الجزء first بـ abc ويتم استبدال الجزء second بـ xyz.
Router
في Angular، الـ Router تُستخدم الفئة لتحديد المسارات والتنقل عبرها. ويتم تحقيق ذلك بطريقتين: Router.navigate و Router.navigateByUrl. تعيد كلتا الطريقتين وعدًا (promise). يمكن أن يحتوي هذا الوعد على ثلاث قيم: true, false، أو null.
-
تكون القيمة true عندما يكون التنقل ناجحًا.
-
تكون القيمة null عندما لا يكون هناك تنقل.
-
و false إذا فشل التنقل لسبب ما.
إذا كنت تريد إتاحة هذه الطرق في تطبيقك، فستحتاج أولاً إلى استيراد الفئة Router في فئة المكون (component class) الخاصة بك:
|
1 |
import { Router } from '@angular/router'; |
بعد ذلك، تحتاج إلى حقن Router في المنشئ (constructor) ضمن التبعيات:
|
1 2 3 4 5 6 7 8 9 10 |
@Component({ // ... }) export class AppComponent { constructor(private router: Router) { // ... } // ... } |
باستخدام هذا الإعداد، ستكون جاهزًا لاستخدام الطريقتين Router.navigate و Router.navigateByUrl في تطبيقك.
Router.navigate
إنّ طريقة Router.navigate تقبل مصفوفة من أجزاء عنوان URL. دعنا نلقي نظرة على مثال أساسي لكود Router.navigate :
|
1 2 3 |
navigateToUsersPage() { this.router.navigate(['/', 'users']); } |
Router.navigateByUrl
أخيرًا، دعنا نلقي نظرة على Router.navigateByUrl. تشبه هذه الطريقة Router.navigate ولكن بدلاً من قبول أجزاء عنوان URL، فإنها تقبل سلسلة نصية تحدد عنوان URL. يجب أن يكون هذا التنقل مطلقًا ويجب أن يحتوي على / في بدايته:
|
1 2 3 |
navigateToUsersPage() { this.router.navigateByUrl('/users;all=true'); } |
سينقل الكود أعلاه المستخدم إلى صفحة /users;all=true.
الخاتمة
في هذا البرنامج التعليمي، ألقينا نظرة على كيفية التنقل في تطبيقات Angular باستخدام RouterLink. يختلف التوجيه (Routing) في تطبيقات Angular قليلاً عن تطبيقات الويب التقليدية لكونها تطبيقات صفحة واحدة (Single-Paged). يمكن أن تساعد معرفة RouterLink ووظائفه المطورين في بناء توجيه قوي.
تستخدم تطبيقات Angular Node.js كبيئة تشغيل خاصة بها. إذا كنت تريد معرفة المزيد عن Node.js وكيفية نشر تطبيقات Node.js، يمكنك إلقاء نظرة على البرامج التعليمية التالية:
- كيفية تثبيت Node.js على Ubuntu 18.04
- إعداد تطبيقات Node.js: كيفية تنفيذ مهام الإنتاج على Ubuntu 20.04 باستخدام Node.js
- كيفية نشر تطبيق Node.js (Express.js) باستخدام Docker على Ubuntu 20.04
حوسبة سعيدة!
التعليقات
لا توجد تعليقات بعد. كن أول من يعلق.