Wprowadzenie
Angular aplikacje są obecnie bardzo powszechne. Są one budowane w oparciu o koncepcję Single Page Applications (SPA). W takich aplikacjach routing pomiędzy stronami internetowymi różni się od tradycyjnych stron, ponieważ używane są komponenty. W Angularze należy użyć RouterLink do nawigacji w celu poruszania się po aplikacji. RouterLink to dyrektywa, która udostępnia Router.navigate oraz Router.navigateByURL metody do nawigacji pomiędzy klasami komponentów.
W tym samouczku będziemy przyglądać się RouterLink, Router.navigate, oraz Router.navigateByURL wraz z przykładowym kodem.
RouterLink
W HTML link jest zwykle wstawiany za pomocą znacznika kotwicy <a> jak poniżej:
|
1 2 3 |
<a href="/sample"> Przykładowy link HTML. </a> |
Ten przykładowy link przekieruje użytkownika do strony /sample. Jednak, jak wspomniano powyżej, aplikacja jednostronicowa (SPA) nie ma różnych stron, do których można linkować. Zamiast tego ma różne widoki lub komponenty do wyświetlenia użytkownikowi.
Jeśli chcesz umożliwić użytkownikowi nawigację i zmianę widoku, musisz użyć dyrektywy RouterLink zamiast href:
|
1 2 3 |
<a routerLink="/users/example"> Link używający ciągu znaków. </a> |
Ten RouterLink przykład poprowadzi użytkownika do komponentu pod adresem /users/example. Różne segmenty adresu URL można również przekazać w tablicy, jak w poniższym przykładzie:
|
1 2 3 |
<a [routerLink]="['/', 'users', 'example']"> Przykład linku z a link with an tablicą. </a> |
Te dwa przykłady są sformatowane w różny sposób, ale nadal będą kierować do tego samego komponentu pod adresem /users/example.
-
Ścieżka względna
RouterLink pozwala na określanie względnych adresów URL. Możemy użyć ../ aby przejść do wyższych poziomów nawigacji. Poniżej przedstawiono, jak możemy to osiągnąć:
|
1 2 3 |
<a [routerLink]="['../', 'parent', 'posts']"> Link prowadzący o poziom wyżej. </a> |
W powyższym przykładzie, jeśli użytkownik znajduje się pod adresem /users/posts, nawigacja przeniesie użytkownika do /posts/parent. Możesz również określić adresy URL względnie za pomocą ./, ../, a nawet bez ukośnika wiodącego, jeśli to konieczne.
-
Parametry
Mogą wystąpić sytuacje, w których konieczne będzie przekazanie danych między trasami. Prostym przykładem jest sytuacja, w której użytkownik wypełnia formularz, a Ty przenosisz go do kolejnej części formularza w celu uzyskania dalszych szczegółów.
Aby przekazać parametry, obiekt hermetyzujący dane jest przekazywany na liście segmentów adresu URL:
|
1 2 3 |
<a [routerLink]="['/', 'users', {display: 'sample'}, 'xyz']"> Link z parametrem. </a> |
Powyżej, Router przekieruje do /users;display=sample/xyz.
-
Nazwane outlety
Nazwane outlety routera to po prostu outlety routera posiadające nazwy. Przyjrzyjmy się kodowi:
|
1 2 3 |
<a [routerLink]="['/', 'users', { outlets: { side: [xyz] } }]"> Link z bocznym outletem. </a> |
W tym przykładzie segment xyz zostanie umieszczony w outlecie o nazwie side. Możemy również określić wiele nazwanych outletów, jak poniżej:
|
1 2 3 |
<a [routerLink]="['/', 'users', { outlets: { first: ['abc'], second: ['xyz'] } }]"> Link z pierwszym i drugim outletem. </a> |
To zastąpi segment first wartością abc a segment second zostanie zastąpiony wartością xyz.
Router
W Angularze, Router klasa służy do definiowania tras i nawigacji po nich. Osiąga się to za pomocą dwóch metod: Router.navigate oraz Router.navigateByUrl. Obie te metody zwracają obietnicę (promise). Ta obietnica może przyjąć trzy wartości: true, false, lub null.
-
Wartość to true gdy nawigacja zakończy się sukcesem.
-
Wartość to null gdy nie ma nawigacji.
-
Oraz false jeśli z jakiegoś powodu nawigacja się nie powiedzie.
Jeśli chcesz, aby te metody były dostępne w Twojej aplikacji, musisz najpierw zaimportować klasę Router w klasie swojego komponentu:
|
1 |
import { Router } from '@angular/router'; |
Następnie musisz wstrzyknąć ten Router w konstruktorze do zależności:
|
1 2 3 4 5 6 7 8 9 10 |
@Component({ // ... }) export class AppComponent { constructor(private router: Router) { // ... } // ... } |
Dzięki tej konfiguracji możesz już używać metod Router.navigate oraz Router.navigateByUrl w swojej aplikacji.
Router.navigate
Metoda Router.navigate przyjmuje tablicę segmentów URL. Przyjrzyjmy się prostemu przykładowi kodu Router.navigate:
|
1 2 3 |
navigateToUsersPage() { this.router.navigate(['/', 'users']); } |
Router.navigateByUrl
Na koniec przyjrzyjmy się Router.navigateByUrl. Metoda ta jest podobna do Router.navigate ale zamiast przyjmować segmenty URL, przyjmuje ciąg znaków określający adres URL. Ta nawigacja musi być absolutna i musi mieć / na początku:
|
1 2 3 |
navigateToUsersPage() { this.router.navigateByUrl('/users;all=true'); } |
Powyższy kod przekieruje użytkownika na stronę /users;all=true strony.
Podsumowanie
W tym samouczku przyjrzeliśmy się, jak nawigować w aplikacjach Angular za pomocą RouterLink. Routing w aplikacjach Angular różni się nieco od tradycyjnych aplikacji internetowych ze względu na to, że są one jednostronicowe (Single-Page). Znajomość RouterLink i jego funkcji może pomóc programistom w budowaniu solidnego routingu.
Aplikacje Angular używają Node.js jako swojego środowiska uruchomieniowego. Jeśli chcesz dowiedzieć się więcej o Node.js i o tym, jak wdrażać aplikacje Node.js, możesz zapoznać się z następującymi samouczkami:
- Jak zainstalować Node.js na Ubuntu 18.04
- Konfiguracja aplikacji Node.js: Jak wykonywać zadania produkcyjne na Ubuntu 20.04 z Node.js
- Jak wdrożyć aplikację Node.js (Express.js) za pomocą Dockera na Ubuntu 20.04
Miłego kodowania!
Komentarze
Brak komentarzy. Bądź pierwszy.