Εισαγωγή
Angular οι εφαρμογές είναι πολύ συνηθισμένες στις μέρες μας. Είναι κατασκευασμένες με τη φιλοσοφία των Single Page Applications (SPA). Σε τέτοιες εφαρμογές, η δρομολόγηση στις ιστοσελίδες είναι διαφορετική από τους παραδοσιακούς ιστότοπους, καθώς χρησιμοποιούνται στοιχεία (components). Στο Angular, πρέπει να χρησιμοποιήσετε RouterLink για πλοήγηση και δρομολόγηση σε όλη την εφαρμογή. Το RouterLink είναι μια οδηγία (directive) και παρέχει τις μεθόδους Router.navigate και Router.navigateByURL για πλοήγηση μεταξύ των κλάσεων των στοιχείων (components).
Σε αυτόν τον οδηγό, θα εξετάσουμε τα RouterLink, Router.navigate, και Router.navigateByURL μαζί με κώδικα παραδείγματα.
RouterLink
Στην HTML ένας σύνδεσμος εισάγεται συνήθως χρησιμοποιώντας μια ετικέτα αγκύρωσης (anchor tag) <a> όπως παρακάτω:
|
1 2 3 |
<a href="/sample"> Παράδειγμα συνδέσμου HTML. </a> |
Αυτός ο υποδειγματικός σύνδεσμος θα οδηγήσει τον χρήστη στη σελίδα /sample . Ωστόσο, όπως αναφέρθηκε παραπάνω, μια εφαρμογή Single-Page (SPA) δεν έχει διαφορετικές σελίδες για σύνδεση. Αντίθετα, έχει διαφορετικές προβολές ή στοιχεία (components) για να εμφανίσει στον χρήστη.
Αν θέλετε να επιτρέψετε σε έναν χρήστη να πλοηγηθεί και να αλλάξει την προβολή, θα πρέπει να χρησιμοποιήσετε την οδηγία RouterLink αντί για την href:
|
1 2 3 |
<a routerLink="/users/example"> Σύνδεσμος που χρησιμοποιεί συμβολοσειρά. </a> |
Αυτό το παράδειγμα RouterLink θα οδηγήσει τον χρήστη στο στοιχείο (component) στο /users/example. Τα διαφορετικά τμήματα URL μπορούν επίσης να περαστούν σε έναν πίνακα, όπως στο ακόλουθο παράδειγμα:
|
1 2 3 |
<a [routerLink]="['/', 'users', 'example']"> Ένα παράδειγμα ενός συνδέσμου με έναν an πίνακα. </a> |
Αυτά τα δύο παραδείγματα είναι μορφοποιημένα με διαφορετικό τρόπο, αλλά θα εξακολουθούν να κατευθύνουν στο ίδιο στοιχείο (component) στο /users/example.
-
Σχετική Διαδρομή
Το RouterLink επιτρέπει τον καθορισμό σχετικών URL. Μπορούμε να χρησιμοποιήσουμε ../ για να ανεβούμε σε υψηλότερα επίπεδα πλοήγησης. Παρακάτω παρουσιάζεται πώς μπορούμε να το επιτύχουμε αυτό:
|
1 2 3 |
<a [routerLink]="['../', 'parent', 'posts']"> Σύνδεσμος που ανεβαίνει ένα επίπεδο. </a> |
Στο παραπάνω παράδειγμα, εάν ο χρήστης βρίσκεται στο /users/posts, η πλοήγηση θα μεταφέρει τον χρήστη στο /posts/parent. Μπορείτε επίσης να καθορίσετε τα URL σχετικά χρησιμοποιώντας ./, ../, ή ακόμα και χωρίς αρχική κάθετο εάν χρειάζεται.
-
Παράμετροι
Ενδέχεται να υπάρχουν σενάρια όπου πρέπει να μεταφέρετε δεδομένα μεταξύ των διαδρομών. Ένα απλό παράδειγμα είναι όταν ο χρήστης συμπληρώνει τη φόρμα και τον μεταφέρετε στο επόμενο μέρος της φόρμας για περισσότερες λεπτομέρειες.
Για να περάσετε τις παραμέτρους, ένα αντικείμενο που ενσωματώνει τα δεδομένα περνιέται στη λίστα των τμημάτων URL:
|
1 2 3 |
<a [routerLink]="['/', 'users', {display: 'sample'}, 'xyz']"> Σύνδεσμος με παράμετρο. </a> |
Παραπάνω, το Router θα πλοηγηθεί στο /users;display=sample/xyz.
-
Ονοματισμένες Έξοδοι (Named Outlets)
Οι ονοματισμένες έξοδοι δρομολογητή (named router outlets) είναι απλώς έξοδοι δρομολογητή με ονόματα. Ας δούμε τον κώδικα για αυτό:
|
1 2 3 |
<a [routerLink]="['/', 'users', { outlets: { side: [xyz] } }]"> Σύνδεσμος με πλευρική έξοδο. </a> |
Σε αυτό το παράδειγμα, το τμήμα xyz θα τοποθετηθεί στην έξοδο με το όνομα side. Μπορούμε επίσης να καθορίσουμε πολλαπλές ονοματισμένες εξόδους όπως παρακάτω:
|
1 2 3 |
<a [routerLink]="['/', 'users', { outlets: { first: ['abc'], second: ['xyz'] } }]"> Σύνδεσμος με την πρώτη και τη δεύτερη έξοδο. </a> |
Αυτό θα αντικαταστήσει το first τμήμα με το abc και το second τμήμα αντικαθίσταται με το xyz.
Router
Στο Angular, ο Router class is used to define the routes and to navigate across them. This is achieved by two methods: Router.navigate and Router.navigateByUrl. Both of these methods return a promise. This promise can have three values: true, false, or null.
-
The value is true when the navigation is successful.
-
The value is null when there is no navigation.
-
And false if for some reason the navigation fails.
If you want to have these methods available in your application, you first need to import the Router class in your component class:
|
1 |
import { Router } from '@angular/router'; |
Next, you need to inject this Router in the constructor to the dependencies:
|
1 2 3 4 5 6 7 8 9 10 |
@Component({ // ... }) export class AppComponent { constructor(private router: Router) { // ... } // ... } |
With this setup, you are ready to use Router.navigate and Router.navigateByUrl methods in your application.
Router.navigate
The Router.navigate method accepts an array of URL segments. Let’s look at a basic example of a Router.navigate code:
|
1 2 3 |
navigateToUsersPage() { this.router.navigate(['/', 'users']); } |
Router.navigateByUrl
Finally, let’s look at Router.navigateByUrl. This method is similar to Router.navigate but instead of accepting URL segments, it accepts a string that specifies the URL. This navigation needs to be absolute and must have / in its start:
|
1 2 3 |
navigateToUsersPage() { this.router.navigateByUrl('/users;all=true'); } |
The above code will navigate the user to /users;all=true page.
Conclusion
In this tutorial, we looked at how to navigate Angular apps using RouterLink. Routing in Angular apps is a bit different than traditional web applications because of being Single-Paged. Knowing RouterLink and its functions can help developers build robust routing.
Angular apps use Node.js as their runtime. If you want to learn more about Node.js and how to deploy Node.js applications, you can take a look at the following tutorials:
- How to install Node.js on Ubuntu 18.04
- Setting up Node.js Applications: How to Perform Production Tasks on Ubuntu 20.04 with Node.js
- How to Deploy a Node.js (Express.js) App with Docker on Ubuntu 20.04
Happy Computing!
Σχόλια
Δεν υπάρχουν σχόλια ακόμα. Γράψτε το πρώτο.