Angular - routing

Autor podstrony: Krzysztof Zajączkowski

Stronę tą wyświetlono już: 1689 razy

Wstęp

Przekierowania to sposób na podzielenie widoku programu na mniejsze widoki. Bo cóż by to było, gdyby wszystkie widoki były obsługiwane w jednym głównym komponencie. Jednak żeby możliwe było stworzenie przekierowań konieczne jest utworzenie modułu routing-u. Jest to możliwe już na samym początku tworzenia aplikacji, gdzie program wyciąga ku nam przyjazną rękę pytając się, czy dodać routing do aplikacji. Na co z najdziksza wręcz rozkoszą należy odpowiedzieć: tak. Oczywiście, nic nie stoi na przeszkodzie aby utworzyć samodzielnie taki plik i podpiąć go pod moduł główny aplikacji.

Tworzenie routingu

Ręczne utworzenie routing-u sprowadza się do utworzenia pliku modułu w folderze /src/app za pomocą polecania:

ng g m appRouting

Niezwłocznie po wygenerowaniu pliku modułu routingu należy otworzyć tenże w jak niezmiernie trudny sposób uzyskany plik i zastąpić istniejącą tam niezmiernie interesującą treść:

import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { SecondComponent } from '../second/second.component'; import { FirstComponent } from '../first/first.component'; const routes: Routes = [ { path: 'heroes', // ścieżka główna routingu component: FirstComponent, // komponent podpięty w jakże przebiegły sposób pod ścieżkę routingu children: [ { path: 'secondComponent/:id', // ścieżka dziecko z parametrem o nazwie id component: SecondComponent // komponent podpięty w jakże przebiegły sposób pod ścieżkę routingu }, ] } ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [ RouterModule ] }) export class AppRoutingModule{ }

Oczywiście po zapisaniu zmian konieczne jest podpięcie tegoż modułu w pliku app.module.ts w sekcji imports dopisując nazwę klasy AppRoutingModule.

Potrzebne też będą dwa komponenty o jakże dużo mówiącej nazwie: FirstComponent i SecondComponent co też i z najdzikszą rozkoszą czynię za pomocą polecenia:

ng g c First

ng g Second

Obsługa routingu w komponentach

Jest już routing zrobiony, ale to jeszcze nie wszystko na drodze do pełni szczęścia. Albowiem za prawdę powiadam wam, konieczne jest jeszcze dodanie w pliku komponentu głównego specjalnego znacznika, który w jakże przebiegły (żeby nie powiedzieć perfidny) sposób będzie wstawiał komponenty podpięte w routing-u. Nie przeciągając już tej chwili wyczekiwania oto co należy wstawić w pliku app.component.html komponentu głównego:

<router-outlet></router-outlet>

Ów, wygląda na to, że najtrudniejsze mam już za sobą, ale czekajcie! To nie wszystko! Jeszcze w pliku first.component.html należy wstawić ten sam znacznik:

<router-outlet></router-outlet>

a to dlatego, żeby mieć dostęp do komponentu dziecka.

Łączenie się z ścieżkami i pobieranie parametrów ścieżki

Tyle już zrobione, ale to jeszcze nie koniec. Albowiem nadeszla wiekopomna chwila, by rozpocząć nowy rozdział w życiu programisty i odwołać się do tak utworzonych ścieżek. W tym celu w pasku przeglądarki wystarczy wpisać:

localhost:4200/first - by odwołać się do pierwszego komponentu;
localhost:4200/first/second - by zobaczyć figę z makiem i zostać wyrzuconym w perfidny sposób do komponentu głównego;
localhost:4200/first/second/200 - by w końcu zobaczyć to, czego poprzednie odwołanie nie widziało;

Ale cóż to się takiego stało, co to tam się nam zadziało, że z drugiego działy wywaliło na zbity pysk?! Ano zabrakło parametru, który w ścieżce był podany. A routing nie popuści i zawsze do głównej ścieżki gdy ten parametr nie zostanie podany. Pytanie zagadka to jak dobrać się do tego parametru? Pytam jak? I oto i odpowiedź jaka mi się objawiła:

ngOnInit() { console.log(this.activatedRoute.snapshot.params); }

Oczywiście powyższy kod należy dopisać w klasie SecondComponent, by po wpisaniu trzeciego z wyżej wypisanych adresów uzyskać parametr id w konsoli przeglądarki:

Parameter id is: 200

Przekazywanie dodatkowych informacji wewnątrz routingu

Okuje się, że do wnętrza komponentu można (a czasami to nawet trzeba) przekazać informacje dodatkowe. Jak jednak tego dokonać? Powiadam jak?! Odpowiedź jest prosta, czyli w pliku routing-u tak:

children: [ { path: 'heroes/:id', component: MyFirstComponentComponent, data: { id2: 'some data' } }, ]

Dobranie się już z poziomu komponentu do tychże informacji również nie będzie nastręczało najmniejszych problemów, oto bowiem sposób na wyciągnięcie upragnionych informacji wygląda następująco:

ngOnInit() { console.log(this.activatedRoute.snapshot.params); console.log(this.activatedRoute.snapshot.data); }

Tym razem w oknie przeglądarki ukażą się takie oto dane:

Object { id: "2" }
Object { id2: "some data" }

Przekazywanie danych za pomocą query

W ścieżce zapisanej w adresie przeglądarki można dodawać argumenty opcjonalne w formie np. takiej:

localhost:4200/first/second/200?query1='some text'&query2=100

Dobrać się do nich można w sposób następujący:

ngOnInit() { console.log(this.activatedRoute.snapshot.params); console.log(this.activatedRoute.snapshot.data); console.log(this.activatedRoute.snapshot.queryParams); }

Teraz w konsoli przeglądarki oczom twym ukazać powinien się taki oto widok:

Object { id: "10" }
Object { id2: "some data" }
Object { query1: "'some text'", query2: "100" }

Tworzenie przycisków lub linków do danej ścieżki

Oto jak można osadzić w kodzie strony przyciski, które po kliknięciu przeniosą użytkownika przeniosą do danej ścieżki:

<div> <button mat-raised-button routerLink="/first">Pierwszy widok</button> <button mat-raised-button [routerLink]="['/first/second', 100]">Drugi widok z parametrem</button> </div>

To samo można uzyskać za pomocą linków:

<div> <p><a routerLink="/first">Pierwszy widok</button></p> <p><a [routerLink]="['/first/second', 100]">Drugi widok z parametrem</button></p> </div>

Propozycje książek