34. فهم منفذ التوجيه (Router Outlet)

يعمل توجيه <router-outlet> كعنصر نائب (placeholder) حيث يقوم Angular بتحميل وعرض المكون المقابل لعنوان URL الحالي ديناميكياً.

منافذ موجه متعددة (منافذ مُسمّاة)

تستخدم معظم التطبيقات منفذاً أساسياً واحداً (المنفذ غير المسمى) في app.component.html لمحتوى الصفحة الرئيسي. ومع ذلك، يدعم Angular منافذ متعددة ومُسمّاة لإدارة مناطق التنقل الثانوية (مثل الأشرطة الجانبية، والنوافذ المنبثقة، والتذييلات) بشكل مستقل.

1. تحديد المنفذ المُسمى

html

2. تهيئة المسار

يجب أن تحدد المسارات التي تستهدف منفذاً مُسمّى خاصية outlet.

typescript const routes: Routes = [ { path: 'home', component: HomeComponent },

// سيتم عرض هذا المكون داخل منفذ 'sidebar' { path: 'help', component: HelpSidebarComponent, outlet: 'sidebar' } ];

3. التنقل إلى المنافذ المُسمّاة

للتنقل إلى منفذ مُسمى، يجب تحديده في مصفوفة المسار باستخدام تدوين المنفذ.

html

<a [routerLink]="[{ outlets: { sidebar: ['help'] } }]">Show Help Sidebar

this.router.navigate([ { outlets: { sidebar: ['help'] } } ]);

تسمح المنافذ المُسمّاة بواجهات مستخدم معقدة حيث يكون مقطعا مسار مستقلان نشطين في وقت واحد (على سبيل المثال، مكون /dashboard الرئيسي ومكون ثانوي /settings(sidebar:profile-preview)).