באגנולר, כמו בפרימוורקים אחרים, router הוא הרכיב שדואג לניווט .
כדי להשתמש בו נבצע את השלבים הבאים :
- נוודא שישנה תגית base
- נייבא את ה- router ב- app.module.ts
- נגדיר מערך של ניתובים
- נוסיף למערך imports, את המערך של הניתובים, דרך המתודה שנקראת forRoot()
- בתוך app.component.html נוסיף תגית router-outlet
- ונקשר בתוך הקומפוננוטות במקומות הנחוצים – באמצעות הוספת המאפיין routerLink לתגית ה- a
--- app.module.ts --------
...
...
import { RouterModule,Routes } from '@angular/router';
...
...
import { Home3Component } from './components/home3/home3.component';
const appRoutes: Routes = [
{ path: '', component: Home3Component},
{ path : 'about', component: AboutComponent},
{ path: 'user/:id', component: UserDetailsComponent}
];
...
...
...
imports: [
BrowserModule,
FormsModule,
HttpModule,
RouterModule.forRoot(appRoutes)
],
--- app.component.html -------
...
...
<router-outlet></router-outlet>
...
...
---- navbar.component.html ------
<li class="nav-item active">
<a class="nav-link" href="#" routerLink="/" >Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" routerLink="/about">Link</a>
</li>
ניתובים (כתובת URL ) עם פרמטר
- ניתן להוסיף ניתובים עם פרמטרים ב-syntax הבא: blabla/:myParam
- כדי לקבל את הכתובות , נייבא אל תוך הקומפוננט את
Router,ActivatedRoute,Params
- ובנוסף נזריק ( DI ) בקונסטרקטור את Router,ActivatedRoute
- כדי שנוכל לקבל את הפרמטר מה-URL, צריכים לרשום = subscribe את הפרמטר בתוך "צופה" = observable.
---- in app.module.ts routes array ----
const appRoutes: Routes = [
{ path: '', component: Home3Component},
{ path : 'about', component: AboutComponent},
{ path: 'user/:id', component: UserDetails3Component}
];
--- in the component -----
import { Component, OnInit } from '@angular/core';
import { Router,ActivatedRoute,Params } from '@angular/router';
@Component({
selector: 'app-user-details-3',
template: `
<h1> This is User number {{id}}.</h1>
`,
})
export class UserDetails3Component implements OnInit {
id:number;
constructor(
private route:ActivatedRoute,
private router:Router
)
{
this.route.params.subscribe((params:Params) => {
this.id = params.id;
});
}
ngOnInit() {}
}