| طريقة التنقل (`Navigation Type`) | مكان الاستخدام الأساسي | الآلية الهندسية للتنفيذ |
|---|---|---|
| التنقل عبر القوالب (`routerLink`) | في قوالب الـ HTML للعناصر التفاعلية والروابط العادية | باستخدام خاصية `routerLink="/path"` لتجنب إعادة تحميل الصفحة بالكامل |
| التنقل البرمجي (`Router Service`) | داخل ملفات الكلاس (`TypeScript`) عند تنفيذ العمليات المنطقية | باستخدام دالة `router.navigate(['/path'])` بعد إتمام الشروط البرمجية |
التنقل بين صفحات التطبيق لا يقتصر فقط على الروابط الثابتة في القوائم، بل يتطلب أحياناً تفاعلاً برمجياً (مثل الانتقال التلقائي بعد إرسال نموذج ناجح أو التحقق من الصلاحيات). يوفر أنجولر طريقتين رئيسيتين للتنقل: توجيه مباشر عبر القوالب باستخدام التوجيه routerLink، وتنقل برمجي متقدم عبر حقن خدمة Router في كلاس المكون.
تضمن أداة routerLink تغيير المسار داخلياً بسلاسة دون إعادة تحميل المتصفح، مما يحافظ على حالة التطبيق في الذاكرة.
تتيح خدمة Router إمكانية اتخاذ قرارات التنقل بناءً على نتائج العمليات الخلفية أو استجابات الخوادم الأمنية.
⚠️ تحذير
تذكر أن استخدام مسارات مطلقة تبدأ بشرطة مائلة (/dashboard) يبدأ مساراً جديداً من الجذر، بينما المسارات النسبية تبدأ من المسار الحالي! تأكد من كتابة مسارات خدمة Router بشكل صحيح لتجنب ضياع مسار التوجيه في التطبيقات المعقدة.
| 1 | import { Component } from '@angular/core'; |
| 2 | import { CommonModule } from '@angular/common'; |
| 3 | import { RouterLink, RouterLinkActive } from '@angular/router'; |
| 4 | |
| 5 | @Component({ |
| 6 | selector: 'app-navigation-links', |
| 7 | standalone: true, |
| 8 | imports: [CommonModule, RouterLink, RouterLinkActive], |
| 9 | template: ` |
| 10 | <div class="nav-container"> |
| 11 | <a routerLink="/dashboard" routerLinkActive="active-link" class="link">لوحة التحكم</a> |
| 12 | <a routerLink="/profile" routerLinkActive="active-link" class="link">الملف الشخصي</a> |
| 13 | </div> |
| 14 | `, |
| 15 | styles: [` |
| 16 | .nav-container { display: flex; gap: 15px; padding: 10px; } |
| 17 | .link { color: #94a3b8; text-decoration: none; padding: 6px 12px; border-radius: 4px; } |
| 18 | .active-link { background: #38bdf8; color: #0f172a; font-weight: bold; } |
| 19 | `] |
| 20 | }) |
| 21 | export class NavigationLinksComponent {} |
| 1 | import { Component, inject } from '@angular/core'; |
| 2 | import { CommonModule } from '@angular/common'; |
| 3 | import { Router } from '@angular/router'; |
| 4 | |
| 5 | @Component({ |
| 6 | selector: 'app-login-redirect', |
| 7 | standalone: true, |
| 8 | imports: [CommonModule], |
| 9 | template: ` |
| 10 | <div class="card"> |
| 11 | <h3>تسجيل الدخول للنظام</h3> |
| 12 | <button (click)="loginAndRedirect()" class="btn">دخول وتحويل تلقائي</button> |
| 13 | </div> |
| 14 | `, |
| 15 | styles: [` |
| 16 | .card { background: #090d16; color: #fff; padding: 24px; border-radius: 8px; } |
| 17 | .btn { background: #10b981; color: #fff; border: none; padding: 10px 20px; border-radius: 6px; cursor: pointer; } |
| 18 | `] |
| 19 | }) |
| 20 | export class LoginRedirectComponent { |
| 21 | private router = inject(Router); |
| 22 | |
| 23 | loginAndRedirect(): void { |
| 24 | console.log('تم التحقق من بيانات الدخول بنجاح...'); |
| 25 | // التنقل البرمجي نحو لوحة التحكم الرئيسية |
| 26 | this.router.navigate(['/dashboard']); |
| 27 | } |
| 28 | } |