Angular – routing

  Angular

Tworzenie projektu z wbudowanym routingiem

ng new nazwaProjektu --routing

następnie tworzymy componenty a w app-routing.module.ts definiujemy ścieżki prowadzące do konkretnych komponentów

const routes: Routes = [
 { path: 'list', component: PagesListComponent },
 { path: 'page', component: PageDetailComponent }
];

Powinno spowodować to automatyczne importy componentów na górze pliku

import { PagesListComponent } from './pages-list/pages-list.component';
import { PageDetailComponent } from './page-detail/page-detail.component';

żeby nie dublować sobie importowania wszystkich stworzonych componentów można wyexportować nową tablicę w app-routing.module.ts

export const routingComponents = [
  PagesListComponent, PageDetailComponent
]

a następnie zaimportować tę tablicę w app.module.ts i dzięki temu usunąc linie, które znajdują się niżej, importujące istniejące wszystkie componenty

import { AppRoutingModule, routingComponents } from './app-routing.module';

a w samej tablicy imports (w @NgModule > declarations)  zastąpić wszystkie componenty tą jedną tablicą.

declarations: [
    AppComponent,
    routingComponents
],

Dzięki temu dodając nowy component musimy go wstawić tylko w jednym miejscu – w tablicy routingComponents (nazwa przykładowa) w app-routing.module.ts

Routing z przekazaniem parametru

Najpierw deklarujemy ścieżkę w app-routing.module.ts

{ path: 'page/:id', component: PageDetailComponent }

linkowanie do innych miejsc:

<a [routerLink]="['/page/'+ page.id]">{{ page.title }}</a>

Pobranie parametru z url: najpierw w componencie, gdzie będziemy pobierać informację dodajemy ActivatedRoute

import { ActivatedRoute } from '@angular/router';

następnie do constructora wstrzykujemy zależność (jeżeli już jakaś tam jest, dodajemy kolejne po przecinkach)

constructor(private _pageList: PageService, private _route: ActivatedRoute) { }

następnie w onOnInit

let id = parseInt(this._route.snapshot.paramMap.get('id'));

możemy wcześniej przed constructorem utworzyć public nazwaZmiennej, by następnie w onInit przypisać do niej wartość „id”. Następnie w szablonie można spokojnie już interpolacją {{ nazwaZmiennej }}