32. تحديد المسارات الأساسية

يتم تحديد المسارات في مصفوفة Routes باستخدام كائنات تربط path (جزء URL) بـ component.

هيكل تهيئة المسار

يتطلب كل كائن مسار ما يلي:

• path: سلسلة نصية تمثل جزء URL.
• component: فئة المكون التي يجب أن يعرضها Angular عندما يتطابق المسار.

typescript import { HomeComponent } from './home/home.component'; import { AboutComponent } from './about/about.component'; import { NotFoundComponent } from './not-found/not-found.component';

const routes: Routes = [ // 1. المسار الافتراضي (Path هو سلسلة نصية فارغة) -> '/' { path: '', component: HomeComponent },

// 2. مسار محدد -> '/about' { path: 'about', component: AboutComponent },

// 3. مسار البدل (Wildcard Route) (يجب أن يكون الأخير!) -> التقاط الكل لـ 404 { path: '**', component: NotFoundComponent } ];

فهم مسار البدل (**)

يتطابق مسار البدل (**) مع أي عنوان URL لم يتم مطابقته بواسطة المسارات السابقة. من الأهمية بمكان تحديد هذا المسار أخيراً في المصفوفة، حيث يقوم الموجه بمعالجة المسارات بالتسلسل.

استراتيجية مطابقة المسار

افتراضياً، يستخدم Angular استراتيجية مطابقة 'البادئة' (prefix)، مما يعني أنه يبحث عن المسار في بداية عنوان URL. ومع ذلك، بالنسبة لمعظم المسارات، عادة ما نريد مطابقات تامة، خاصة للمسار الجذر.

نحدد بوضوح استراتيجية مطابقة المسار للمسار الجذر باستخدام pathMatch: 'full':

typescript const routes: Routes = [ { path: '', component: HomeComponent, pathMatch: 'full' }, // يتطلب تطابقاً تاماً على '/' // ... other routes ];