| مكون البنية المعمارية | دوره الوظيفي في التطبيق | طريقة استخدامه في القوالب |
|---|---|---|
| `Routes Array` | ربط كل مسار نصي (`path`) بالمكون المستقل (`component`) الخاص به | يُعرف في ملف مخصص مثل `app.routes.ts` |
| `router-outlet` | حجز مساحة ديناميكية في واجهة المستخدم لعرض المكون النشط | يُوضع مباشرة في قالب المكون الرئيسي (`app.component.ts`) |
بعد إعداد نظام المسارات المركزي، يأتي الدور الأساسي لربط الروابط النصية بالمكونات المستقلة المستهدفة وتحديد المكان المخصص لعرضها داخل هيكل الصفحة العام باستخدام عنصر العرض الديناميكي router-outlet. يُعتبر هذا العنصر بمثابة النافذة الهيكلية التي تتبدل محتوياتها تلقائياً بناءً على تنقلات المستخدم.
يتم استدعاء المكونات مباشرة داخل كائن المسار، مما يسهل عملية تتبع الاعتمادات البرمجية ومعرفة الصفحات المرتبطة بكل مسار.
يعمل عنصر router-outlet كمستقبل حي يقوم بمسح المكون القديم وعرض المكون الجديد فور تغير مسار الـ URL في المتصفح.
| 1 | import { Component } from '@angular/core'; |
| 2 | import { CommonModule } from '@angular/common'; |
| 3 | import { RouterOutlet, RouterLink } from '@angular/router'; |
| 4 | |
| 5 | @Component({ |
| 6 | selector: 'app-root', |
| 7 | standalone: true, |
| 8 | imports: [CommonModule, RouterOutlet, RouterLink], |
| 9 | template: ` |
| 10 | <nav class="navbar"> |
| 11 | <a routerLink="/" class="nav-link">الرئيسية</a> |
| 12 | <a routerLink="/about" class="nav-link">عن التطبيق</a> |
| 13 | </nav> |
| 14 | <main class="content-area"> |
| 15 | <!-- نافذة عرض المسارات الديناميكية --> |
| 16 | <router-outlet></router-outlet> |
| 17 | </main> |
| 18 | `, |
| 19 | styles: [` |
| 20 | .navbar { display: flex; gap: 20px; padding: 16px; background: #0f172a; } |
| 21 | .nav-link { color: #38bdf8; text-decoration: none; font-weight: bold; } |
| 22 | .content-area { padding: 24px; background: #090d16; color: #fff; min-height: 80vh; } |
| 23 | `] |
| 24 | }) |
| 25 | export class AppComponent {} |
⚠️ تحذير
تذكر أن نسيان استيراد RouterOutlet في مصفوفة imports الخاصة بالمكون لن يظهر أي محتوى ديناميكي! تأكد دائماً من تسجيل RouterOutlet و RouterLink في المكونات التي تستخدمها لتجنب توقف نظام العرض.