Einführung
Angular Anwendungen sind heutzutage sehr verbreitet. Sie basieren auf dem Konzept von Single Page Applications (SPA). In solchen Anwendungen unterscheidet sich das Routing über die Webseiten hinweg von herkömmlichen Websites, da Komponenten verwendet werden. In Angular müssen Sie RouterLink für die Navigation verwenden, um durch die Anwendung zu navigieren. RouterLink ist eine Direktive und bietet die Methoden Router.navigate und Router.navigateByURL an, um durch die Komponentenklassen zu navigieren.
In diesem Tutorial werden wir uns folgende ansehen: RouterLink, Router.navigate, und Router.navigateByURL zusammen mit Code- beispielen.
RouterLink
In HTML wird ein Link normalerweise mit einem Anchor-Tag <a> wie unten eingefügt:
|
1 2 3 |
<a href="/sample"> Beispiel-HTML-Link. </a> |
Dieser Beispiel-Link führt den Benutzer zur /sample-Seite. Wie oben erwähnt, hat eine Single-Page-Anwendung (SPA) jedoch keine verschiedenen Seiten, auf die verlinkt werden kann. Stattdessen hat sie verschiedene Ansichten oder Komponenten, die dem Benutzer angezeigt werden.
Wenn Sie dem Benutzer ermöglichen möchten, zu navigieren und die Ansicht zu ändern, müssen Sie die Direktive RouterLink anstelle von href:
|
1 2 3 |
<a routerLink="/users/example"> Link, der einen String verwendet. </a> |
Dieses RouterLink-Beispiel führt den Benutzer zur Komponente unter /users/example. Die verschiedenen URL-Segmente können auch in einem Array übergeben werden, wie im folgenden Beispiel:
|
1 2 3 |
<a [routerLink]="['/', 'users', 'example']"> Ein Beispiel für einen Link mit einem Array. </a> |
Diese beiden Beispiele sind unterschiedlich formatiert, führen aber dennoch zur selben Komponente unter /users/example.
-
Relativer Pfad
Der RouterLink ermöglicht die Angabe relativer URLs. Wir können ../ verwenden, um zu höheren Navigationsebenen aufzusteigen. Unten sehen Sie, wie wir dies erreichen können:
|
1 2 3 |
<a [routerLink]="['../', 'parent', 'posts']"> Link, der eine Ebene nach oben geht. </a> |
Wenn sich der Benutzer im obigen Beispiel unter /users/posts befindet, führt die Navigation den Benutzer zu /posts/parent. Sie können die URLs auch relativ mit ./, ../ angeben, oder bei Bedarf sogar ganz ohne führenden Schrägstrich.
-
Parameter
Es kann Szenarien geben, in denen Sie Daten zwischen den Routen übergeben müssen. Ein einfaches Beispiel ist, wenn der Benutzer ein Formular ausfüllt und Sie ihn für weitere Details zum nächsten Teil des Formulars leiten.
Um die Parameter zu übergeben, wird ein Objekt, das die Daten kapselt, in der Liste der URL-Segmente übergeben:
|
1 2 3 |
<a [routerLink]="['/', 'users', {display: 'sample'}, 'xyz']"> Link mit Parameter. </a> |
Oben navigiert der Router zu /users;display=sample/xyz.
-
Benannte Outlets
Benannte Router-Outlets sind einfach Router-Outlets mit Namen. Sehen wir uns den Code hierfür an:
|
1 2 3 |
<a [routerLink]="['/', 'users', { outlets: { side: [xyz] } }]"> Link mit einem seitlichen Outlet. </a> |
In diesem Beispiel wird das Segment xyz im Outlet namens „side“ platziert. Wir können auch mehrere benannte Outlets wie folgt angeben:
|
1 2 3 |
<a [routerLink]="['/', 'users', { outlets: { first: ['abc'], second: ['xyz'] } }]"> Link mit dem ersten und zweiten Outlet. </a> |
Dies ersetzt das Segment first durch abc und das Segment second wird durch xyz.
Router
In Angular ist der Router -Klasse wird verwendet, um die Routen zu definieren und zwischen ihnen zu navigieren. Dies wird durch zwei Methoden erreicht: Router.navigate und Router.navigateByUrl. Beide dieser Methoden geben ein Promise zurück. Dieses Promise kann drei Werte haben: true, false, oder null.
-
Der Wert ist true, wenn die Navigation erfolgreich ist.
-
Der Wert ist null, wenn keine Navigation stattfindet.
-
Und false, wenn die Navigation aus irgendeinem Grund fehlschlägt.
Wenn Sie diese Methoden in Ihrer Anwendung zur Verfügung haben möchten, müssen Sie zuerst die Router-Klasse in Ihrer Komponentenklasse importieren:
|
1 |
import { Router } from '@angular/router'; |
Als Nächstes müssen Sie diesen Router im Konstruktor in die Abhängigkeiten injizieren:
|
1 2 3 4 5 6 7 8 9 10 |
@Component({ // ... }) export class AppComponent { constructor(private router: Router) { // ... } // ... } |
Mit diesem Setup sind Sie bereit, die Methoden Router.navigate und Router.navigateByUrl in Ihrer Anwendung zu verwenden.
Router.navigate
Die Methode Router.navigate akzeptiert ein Array von URL-Segmenten. Schauen wir uns ein einfaches Beispiel für einen Router.navigate-Code an:
|
1 2 3 |
navigateToUsersPage() { this.router.navigate(['/', 'users']); } |
Router.navigateByUrl
Werfen wir schließlich einen Blick auf Router.navigateByUrl. Diese Methode ähnelt Router.navigate, aber anstatt URL-Segmente zu akzeptieren, akzeptiert sie eine Zeichenfolge, die die URL angibt. Diese Navigation muss absolut sein und muss / am Anfang stehen:
|
1 2 3 |
navigateToUsersPage() { this.router.navigateByUrl('/users;all=true'); } |
Der obige Code navigiert den Benutzer zur Seite /users;all=true-Seite.
Fazit
In diesem Tutorial haben wir uns angesehen, wie man in Angular-Apps mit RouterLink navigiert. Das Routing in Angular-Apps unterscheidet sich ein wenig von herkömmlichen Webanwendungen, da es sich um Single-Page-Anwendungen handelt. Die Kenntnis von RouterLink und seinen Funktionen kann Entwicklern helfen, ein robustes Routing aufzubauen.
Angular-Apps verwenden Node.js als Laufzeitumgebung. Wenn Sie mehr über Node.js und die Bereitstellung von Node.js-Anwendungen erfahren möchten, können Sie sich die folgenden Tutorials ansehen:
- So installieren Sie Node.js auf Ubuntu 18.04
- Einrichten von Node.js-Anwendungen: So führen Sie Produktionsaufgaben auf Ubuntu 20.04 mit Node.js aus
- So stellen Sie eine Node.js (Express.js)-App mit Docker auf Ubuntu 20.04 bereit
Viel Spaß beim Programmieren!
Kommentare
Noch keine Kommentare. Schreiben Sie den ersten.