Introductie
Angular-applicaties zijn tegenwoordig heel gebruikelijk. Ze zijn gebouwd met het concept van Single Page Applications (SPA). In dergelijke applicaties is de routing tussen webpagina's anders dan bij traditionele websites, omdat er componenten worden gebruikt. In Angular moet je RouterLink gebruiken voor navigatie om door de applicatie te navigeren. RouterLink is een directive en biedt Router.navigate en Router.navigateByURL methoden om tussen de componentklassen te navigeren.
In deze handleiding gaan we kijken naar RouterLink, Router.navigate, en Router.navigateByURL samen met code- voorbeelden.
RouterLink
In HTML wordt een link normaal gesproken ingevoegd met een anchor-tag <a> zoals hieronder:
|
1 2 3 |
<a href="/sample"> Voorbeeld HTML-link. </a> |
Deze voorbeeldlink navigeert de gebruiker naar de /sample pagina. Zoals hierboven vermeld, heeft een Single-Page application (SPA) echter geen verschillende pagina's om naar te linken. In plaats daarvan heeft het verschillende weergaven of componenten om aan de gebruiker te tonen.
Als je een gebruiker wilt laten navigeren en de weergave wilt laten wijzigen, moet je de RouterLink directive gebruiken in plaats van href:
|
1 2 3 |
<a routerLink="/users/example"> Link die een string gebruikt. </a> |
Dit RouterLink voorbeeld leidt de gebruiker naar de component op /users/example. De verschillende URL-segmenten kunnen ook in een array worden doorgegeven, zoals in het volgende voorbeeld:
|
1 2 3 |
<a [routerLink]="['/', 'users', 'example']"> Een voorbeeld van een link met een array. </a> |
Deze twee voorbeelden zijn op een andere manier geformatteerd, maar verwijzen nog steeds naar dezelfde component op /users/example.
-
Relatief pad
De RouterLink maakt het mogelijk om relatieve URL's op te geven. We kunnen ../ gebruiken om naar de hogere navigatieniveaus te gaan. Hieronder zie je hoe we dit kunnen bereiken:
|
1 2 3 |
<a [routerLink]="['../', 'parent', 'posts']"> Link die een niveau omhoog gaat. </a> |
In het bovenstaande voorbeeld, als de gebruiker zich bevindt op /users/posts, zal de navigatie de gebruiker naar brengen/posts/parent. Je kunt de URL's ook relatief specificeren met ./, ../, of zelfs zonder slash aan het begin indien nodig.
-
Parameters
Er kunnen scenario's zijn waarin je gegevens tussen de routes moet doorgeven. Een eenvoudig voorbeeld is wanneer de gebruiker het formulier invult en je hem naar het volgende deel van het formulier leidt voor verdere details.
Om de parameters door te geven, wordt een object dat de gegevens inkapselt doorgegeven in de lijst met URL-segmenten:
|
1 2 3 |
<a [routerLink]="['/', 'users', {display: 'sample'}, 'xyz']"> Link met parameter. </a> |
Hierboven zal de Router navigeren naar /users;display=sample/xyz.
-
Benoemde outlets
De benoemde router outlets zijn simpelweg router outlets met namen. Laten we eens naar de code hiervoor kijken:
|
1 2 3 |
<a [routerLink]="['/', 'users', { outlets: { side: [xyz] } }]"> Link met een side-outlet. </a> |
In dat voorbeeld wordt het xyz segment in de outlet met de naam side geplaatst. We kunnen ook meerdere benoemde outlets specificeren, zoals hieronder:
|
1 2 3 |
<a [routerLink]="['/', 'users', { outlets: { first: ['abc'], second: ['xyz'] } }]"> Link met de eerste en tweede outlets. </a> |
Dit vervangt het first segment door abc en het second segment wordt vervangen door xyz.
Router
In Angular is de Router class wordt gebruikt om de routes te definiëren en erdoorheen te navigeren. Dit wordt bereikt door twee methoden: Router.navigate en Router.navigateByUrl. Beide methoden retourneren een promise. Deze promise kan drie waarden hebben: true, false, of null.
-
De waarde is true wanneer de navigatie succesvol is.
-
De waarde is null wanneer er geen navigatie is.
-
En false als de navigatie om een of andere reden mislukt.
Als je deze methoden beschikbaar wilt hebben in je applicatie, moet je eerst de Router class importeren in je component-class:
|
1 |
import { Router } from '@angular/router'; |
Vervolgens moet je deze Router injecteren in de constructor naar de dependencies:
|
1 2 3 4 5 6 7 8 9 10 |
@Component({ // ... }) export class AppComponent { constructor(private router: Router) { // ... } // ... } |
Met deze setup ben je klaar om de Router.navigate en Router.navigateByUrl methoden te gebruiken in je applicatie.
Router.navigate
De Router.navigate methode accepteert een array van URL-segmenten. Laten we kijken naar een basisvoorbeeld van een Router.navigate code:
|
1 2 3 |
navigateToUsersPage() { this.router.navigate(['/', 'users']); } |
Router.navigateByUrl
Laten we tot slot kijken naar Router.navigateByUrl. Deze methode is vergelijkbaar met Router.navigate maar in plaats van URL-segmenten te accepteren, accepteert het een string die de URL specificeert. Deze navigatie moet absoluut zijn en moet / aan het begin hebben:
|
1 2 3 |
navigateToUsersPage() { this.router.navigateByUrl('/users;all=true'); } |
De bovenstaande code leidt de gebruiker naar de /users;all=true pagina.
Conclusion
In deze tutorial hebben we gekeken naar hoe je door Angular-apps navigeert met behulp van RouterLink. Routing in Angular-apps is een beetje anders dan in traditionele webapplicaties omdat ze Single-Page zijn. Kennis van RouterLink en de functies ervan kan ontwikkelaars helpen bij het bouwen van robuuste routing.
Angular-apps gebruiken Node.js als hun runtime. Als je meer wilt leren over Node.js en hoe je Node.js-applicaties implementeert, kun je de volgende tutorials bekijken:
- Hoe installeer je Node.js op Ubuntu 18.04
- Node.js-applicaties opzetten: Hoe voer je productietaken uit op Ubuntu 20.04 met Node.js
- Hoe implementeer je een Node.js (Express.js) app met Docker op Ubuntu 20.04
Veel plezier met programmeren!
Reacties
Nog geen reacties. Wees de eerste.