العودة إلى الدورة

التنقل البرمجي والتنقل التعريفي (routerLink)

مطور Angular الشامل: من الصفر إلى الاحتراف

33. التنقل البرمجي والتنقل التعريفي

يوفر Angular طريقتين رئيسيتين للتعامل مع التنقل:

  1. التعريفي (Declarative): استخدام توجيه routerLink في القالب (الروابط القياسية).
  2. البرمجي (Programmatic): استخدام خدمة Router في فئة المكون (يتم تشغيله بواسطة المنطق).

1. التنقل التعريفي (routerLink)

يحل توجيه routerLink محل السمة القياسية href على علامات الإرساء (anchor tags).

html

<nav> <a routerLink="/">Home</a> | <a routerLink="/about">About Us</a> | <!-- RouterLink يدعم صيغة المصفوفة للمسارات ذات الأجزاء -->

<a [routerLink]="['/users', 10]">User 10</a>

</nav>

2. التنقل البرمجي (خدمة Router)

نقوم بحقن خدمة Router في مُنشئ المكون/الخدمة. يُستخدم هذا عندما يكون التنقل شرطياً (على سبيل المثال، بعد تسجيل دخول ناجح أو إرسال نموذج).

typescript import { Router } from '@angular/router';

export class LoginComponent {

constructor(private router: Router) { }

handleLogin() { // افترض مصادقة ناجحة const success = true;

if (success) {
  // الانتقال إلى مسار لوحة القيادة
  this.router.navigate(['/dashboard']); 
  
  // للتنقل إلى مستوى أعلى:
  // this.router.navigate(['../'], { relativeTo: this.route });
} else {
  alert('Login failed!');
}

} }

رابط الموجه النشط (routerLinkActive)

لإبراز الرابط النشط حالياً (على سبيل المثال، إضافة فئة CSS)، استخدم routerLinkActive.

html <a routerLink="/about" routerLinkActive="active-link">About</a>