שיעור 22 באנגולר ( angular ) – שימוש ב- router

באגנולר, כמו בפרימוורקים אחרים, 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() {} 



}