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

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

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

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

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

html

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 About