Abrufen der aktuellen Route in Angular

1. Die Definition und Verwendung von Routen im Internet
2. Schritte zum Abrufen der aktuellen Route in Angular
3. Erstellen Sie eine HTML-Vorlage, um die aktuelle Route in Angular zu erhalten

Ein Angular-Router ist ein leistungsstarkes Werkzeug, das die Navigation der Anwendung ermöglicht. Es ist eine wesentliche Komponente zum Erstellen von Single-Page-Anwendungen.

Dieser Artikel behandelt den Angular-Router. Es ist hilfreich für Sie zu lernen, wie Sie die aktuelle Route in Angular erhalten.

Angular stellt für die Frontend-App einen Router bereit, der dem Nutzer die aktuelle Route liefert und die Navigation zu anderen Routen ermöglicht. Darüber hinaus bietet der Angular Router eine bidirektionale Datenbindung, was bedeutet, dass sich alle Datenänderungen sowohl in Ansichten als auch in URLs widerspiegeln.

Die Definition und Verwendung von Routen im Internet

Wir können das Internet nicht ohne Routen betreiben. Routen werden für den Zugriff auf Inhalte im Internet verwendet. Es ist ein Dienst, mit dem Sie an einem Ort auf alle Artikel, Videos und andere Inhalte zugreifen können.

Wir informieren den Server der Site über die Seite, die wir sehen möchten, indem wir Routen verwenden. Wir teilen beispielsweise www.wikipedia.com mit, dass wir an /Angular (web framework) interessiert sind.

https://en.wikipedia.org/wiki/Angular_(web_framework)

Der obige Link führt uns zum AngularJS-Framework. Der Server kann anhand von Routen genau entscheiden, welche Seite wir besuchen möchten.

Außerdem sind sie in der Regel für Menschen lesbar. Es ist nicht nur für den Server offensichtlich, wohin er gehen soll, sondern auch für den Benutzer.

Ersetzen Sie /Angular auf dem Link durch den Namen eines beliebigen Sub-Wikis, und Sie sind fertig. Sie können dorthin gelangen, ohne die Suche zu verwenden oder auf Schaltflächen zu klicken.

Browser können mit Routen ziemlich gut umgehen, weil es so lange das Standardformat war. Sie können die Navigation eines Benutzers leicht überwachen und Funktionen wie eine Zurück-Schaltfläche oder einen Verlauf bereitstellen.

Klicken Sie hier, um mehr über Routen zu erfahren.

Schritte zum Abrufen der aktuellen Route in Angular

Angular bietet eine leistungsstarke und umfassende Bibliothek für das Routing. Lassen Sie uns die Grundlagen des Angular-Routing verstehen und besprechen, wie Sie Ihre aktuelle Route erhalten.

Wir werden ein vollständiges Beispiel für das Abrufen einer aktuellen Route in Angular schreiben, indem wir die oben genannten Schritte verwenden.

Der Routingdienst stellt eine Reihe von APIs zum Definieren von Routen und Routenparametern bereit. Der Angular-Router kann so konfiguriert werden, dass er mehrere Ansichten für verschiedene URLs verwendet, sodass Sie eine Seite mit zwei Abschnitten haben können, jeder mit seiner Ansicht.

Das RouterModule enthält alle Routing-relevanten Informationen. Angular ist in diesem Modul enthalten. Wir müssen dieses Modul in unser AppModule importieren, um Routing zu verwenden.

Wie setzen wir also Routing in die Praxis um? Wie bereits erwähnt, beginnen wir mit dem Import des RouterModule..

import { Router, Event, NavigationStart, NavigationEnd, NavigationError} from '@angular/router';

Unsere App ist jetzt bereit für das Routing. Wir müssen die Routen angeben, die unserer Anwendung zur Verfügung stehen sollen.

Gleichzeitig entscheiden wir, welche Komponenten wir auf bestimmten Strecken präsentieren. Aber fangen wir mit den Grundlagen an.

Es hat sich bewährt, eine separate Routing-Datei zu erstellen, um Routen zu definieren; Module+.routing.ts ist der gebräuchlichste Name für diese Routing-Datei. Um eine Routing-Datei für das AppModule zu erstellen, würden wir app-routing.module.ts nennen.

Lassen Sie uns also diese Datei neben der Datei app.module.ts erstellen. In dieser Datei erstellen wir ein statisches Array, das alle Routen des Moduls enthält.

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AboutusComponent } from './aboutus/aboutus.component';
import { AppComponent } from './app.component';

import { ServicesComponent } from './services/services.component';

const routes: Routes = [
  {path: '', redirectTo: 'AppComponent', pathMatch: 'full'},

  {path:'aboutus', component:AboutusComponent},

  {path:'services', component:ServicesComponent},
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Das wichtigste Element ist dabei das von uns definierte Array Routes. Wir können unsere Routen innerhalb dieses Arrays definieren.

Diese Routen sind, wie Sie sehen, als Objekte definiert. In jedem von ihnen gibt es eine Pfadeigenschaft.

Der Pfad zu unserer aboutusComponent wäre beispielsweise /aboutus. Hier ist es auch möglich, Routen mit variablen Parametern zu konstruieren.

Beispielsweise könnten Sie eine blog-Komponente unter der blog-Route haben. Wir möchten jedoch, dass diese Komponente je nach Route unterschiedliche Blogs anzeigt.

Dazu hängen wir die ID des Blogs an die Route an.

Erstellen Sie eine HTML-Vorlage, um die aktuelle Route in Angular zu erhalten

Nachdem Sie die genannten Schritte ausgeführt haben, ist es jetzt an der Zeit, an der HTML-Datei zu arbeiten, um die aktuelle Route zu erhalten. Dafür verwenden wir einen Router-Link.

Mit dem Attribut routerLink können wir die Routen unserer App direkt aus dem HTML-Dokument verlinken. Platzieren Sie die Direktive in einem HTML-Element.

Angular zeigt die aktuelle Route, wenn die Besucher auf die Komponente klicken.

<h3>Example of How to get Current Route in Angular</h3>

<ul>
   <li routerLinkActive="active">
      <a [routerLink]="['/aboutus']">About Us</a>
   </li>
   <li routerLinkActive="active">
      <a [routerLink]="['/services']">Services</a>
   </li>

</ul>

The current Route is {{currentRoute}}

<router-outlet></router-outlet>

Außerdem haben wir hier eine Router-Steckdose verwendet. Der Ausgang für den Router, router-outlet, ist eine von RouterModule generierte Eigenschaft, die als Platzhalter für den Router dient und angibt, wo die passende Komponente eingefügt werden soll.

Die Anwendungs-Shell bezieht sich auf die Komponente, die den Router-Ausgang enthält.

<router-outlet></router-outlet>

In der gleichen Anwendung ermöglicht der Angular-Router viele Steckdosen. Die primäre Steckdose ist die Hauptsteckdose (oder die oberste Steckdose).

Schließlich ermöglicht Ihnen das Outlet-Attribut, einen Ziel-Outlet für eine Routenspezifikation zu definieren.

Lassen Sie uns am letzten Schritt arbeiten, um die aktuelle Route in Angular zu erhalten. Erstellen wir dafür eine app.component.ts-Datei.

Denken Sie daran, dass wir in unserer Anwendung zwei Routen erstellt haben, about us und services. Da wir möchten, dass unser Modul so eigenständig wie möglich ist, werden alle seine Unterrouten in einer separaten Datei innerhalb des Moduls definiert.

import { Component } from '@angular/core';
import { Router, Event, NavigationStart, NavigationEnd, NavigationError} from '@angular/router';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.sass']
})
export class AppComponent {
  currentRoute: string;
  constructor(private router: Router) {
    this.currentRoute = "Demo";
    this.router.events.subscribe((event: Event) => {

        if (event instanceof NavigationEnd) {
            this.currentRoute = event.url;
              console.log(event);
        }


    });

}
}

Hier ist NavigationEnd ein Router-Ereignis, das ausgelöst oder aufgerufen wird, wenn die Navigation reibungslos endet. Um mehr über Router-Ereignisse zu erfahren, hier klicken.

Wenn wir auf den Abschnitt services klicken, erhalten wir die aktuelle Route der Dienste, und dasselbe passiert mit dem Abschnitt about us.

Darüber hinaus können Sie die Abschnitte auch Ihren Anforderungen entsprechend modifizieren.

Klicken Sie hier, um die Live-Demonstration des oben genannten Codes zu überprüfen.