Child route

נתיבי Child או nested routes הם נתיבים שנמצאים בתוך נתיבים אחרים. כתובת הבסיס שלהם תהיה הכתובת של נתיב הבסיס ואחריו יבוא החלק של הקישור שמתוא להם.

נניח שיש לי רשימה של משתמשים, אני נכנסת לתוך פרופיל של משתמש ספציפי. עכשיו למשתמש הזה יש לי קומפוננטה של פרטים אישיים וקומפוננטה של פרטי החברה שבה הוא עובד.

הקומפוננטות האלה נקראות בהקשר של היוזר הספציפי ואנחנו רוצים לקרוא להם מתוך היוזר.

הנתיבים יראו כמו:

/user/1/address
/user/1/company

כדי להוסיף את נתיבי ה-child אנחנו מוסיפים את children לנתיב ההורה.

app-routing-module.js

const routes: Routes = [
    ...
    {path: 'user/:id', component: UserComponent, 
    children: [
        {path: '', redirectTo: 'address', pathMatch: 'full'},
        {path: 'address', component: AddressComponent},
        {path: 'company', component: CompanyConponent}
    ]},
    ...
]

השלב הבא הוא לשים את המקום שלתוכו האפליקציה תכניס את התוכן של ה-routes האלה.

אנחנו משתמשים ב-user-outlet והפעם בתוך הקומפוננטה של ה-user, קומפוננטת האב.

user.component.html

some code displaying the user info
<ul>
    <li><a routerLink="address">Address</a></li>
    <li><a routerLink="company">Company</a></li>
</ul>

<router-outlet></router-outlet>