Anfängerführung zu Angular: Routing

Angular Routing: Erstellen Sie den Navigationskern einer einzelnen Seitenanwendung

In einer einzelnen Seitenanwendung ist Routing der Kernmechanismus, der sicherstellt, dass die richtigen Komponenten für die aktuelle Ansicht oder den Anwendungszustand geladen werden. Das Routing wird normalerweise angefordert, wenn die Anwendung geladen wird oder wenn die Benutzeraktion ausgelöst wird, und kann auch basierend auf der Eingabe des Servers ausgelöst werden.

Winkelrouter haben viele wichtige Bausteine. Dieser Artikel zeigt den wichtigsten Teil des Angular -Routers und baut ein praktisches Beispiel im Prozess auf.

Schritt 1: Installieren Sie den Winkelrouter

Zunächst müssen Sie den Winkelrouter in Ihrem Projekt installieren. Angular Router ist ein äußerst leistungsstarker JavaScript-basierter Router, der vom Angular Core-Team erstellt und aufrechterhalten wird.

Sie können den Router einfach über das @angular/router -Paket installieren. Es gibt zwei verschiedene Möglichkeiten, das @angular/router -Paket zu installieren. Sie müssen die Stammroute Ihrer Anwendung in Ihrer index.html -Datei festlegen. Im Root -Ordner der Anwendung finden Sie die index.html -Datei. Verwenden Sie hier den "/" -Pfad, um den Basisort hinzuzufügen. Diese Änderung zeigt Angular, wo alle verschiedenen Routen beginnen.

<base href="/">
<title>Winkelrouting</title>

Schritt 2: Hinzufügen von Abhängigkeiten zu app.module.ts

Wenn Sie NgModule verwenden, muss das Haupt App Module der Anwendung eine NgModule -Deklaration haben. Diese Datei muss mit den folgenden Komponenten geändert werden:

 importieren {ngmodule} aus '@angular/core';
Import {browsmodule} aus '@angular/plattform-browser';
importieren {routerodule} aus '@Angular/Router';

Import {AppComponent} aus './app.comPonent';

@Ngmodule ({{{
  Importe: [Browsmodule, Rousterodule],
  Bootstrap: [AppComponent],
  Deklarationen: [AppComponent],
})
Exportklasse AppModule {}

Schritt 3: Konfigurieren Sie RouterModule

RouterModule erfordert Informationen zum Routing in einer einzelnen Seitenanwendung. Vor der Bereitstellung dieser Informationen verfügt RouterModule über zwei statische Methoden, mit denen der Router die erforderliche Konfiguration für das Routing in der Anwendung bereitstellt. Dies ist der Zeitpunkt, an dem das gesamte Setup abgeschlossen ist.

Bei der Definition einer Route für die Stammkonfiguration einer Anwendung können mithilfe einer statischen Methode, die forRoot genannt wird, auf mehrere Routing -Anweisungen in der Anwendung zugegriffen werden. Hier ist ein kleiner Code -Snippet, der zeigt, wie forRoot verwendet wird. In vielen Fällen ist es einfacher zu lesen und zu behalten, ob die Route in einer separaten Datei gespeichert und in das unten stehende ROUTES importiert wird.

Als nächstes haben wir RouterModule.forRoot . Der Hauptunterschied ist forRoot . Module in der Anwendung können ihre eigenen Routen definieren und konfigurieren. Diese Routen können nach Bedarf in das Hauptmodul importiert werden.

Hier ist ein kleiner Code-Snippet, bei dem wir router-outlet verwenden. Wenn unser Router die für die Route geladene Komponente identifiziert, wird die Komponente dynamisch erstellt. Die dynamisch erstellten Komponenten werden entlang router-outlet -Elements injiziert. In AppComponent können Sie Richtlinien wie folgt injizieren:

 {component} aus '@angular/core' importieren;

@Komponente({
  Selektor: 'AppComponent',
  Vorlage: `
<div>
<h1>Winkelrouting</h1>
<router-outlet></router-outlet>
</div>
  `,
})
Exportklasse AppComponent {}

Die Einstellungen enden hier. Jetzt können wir uns die spezifischen Anforderungen des Projekts ansehen und die Route aufbauen.

Schritt 4: Erstellen Sie eine Route für eine einzelne Seitenanwendung

Wir erstellen die Route für die Anwendung in der folgenden Datei: app.routing.ts . Das statische Routing ist bei der Erstellung einer einzelnen Seitenanwendung von entscheidender Bedeutung. In unserem Fall ist das statische Routing die Homepage der Anwendungsbelastung.

Hier ist unser routes -Array:

 exportieren const genehmigt: Routen = [
    {Pfad: '', Komponente: Homecomponent},
    {Pfad: 'Calc', Komponente: Calccomponent},
    {Pfad: '**', Komponente: NotFoundComponent}
];

• Ein leerer Weg repräsentiert eine statische Route.
• ** bedeutet, was geladen werden soll, wenn es keine andere Übereinstimmungsroute gibt.

Schritt 5: Navigation

Mit den oben erstellten Routing- und Konfigurationsänderungen können wir navigieren. Erstellen wir zunächst eine Hauptkomponente für unsere Anwendung namens routerLink , eine Angular -Richtlinie routerLink Sie von einer Route zur anderen übertragen können, ohne den Wert in der URL -Balken zu ändern. Wenn Sie eine dynamische Route erstellen möchten, müssen Sie [routerLink]=['/path', variable] einwickeln.

Dies ist unsere home.component.html -Datei mit statischen Routing -Links.

<h2>
    Willkommen auf der Homepage
</h2>

<nav>
<a routerlink="/calc" routerlinkactive="active">Gehen Sie zu Calc</a>
</nav>

Dies ist die entsprechende Datei home.component.ts Datei:

 {component} aus '@angular/core' importieren;

@Komponente({
  Selektor: 'Home',
  templateurl: 'home.component.html' '
})
Exportklasse Homecomponent {}

Wenn Sie die Anwendung standardmäßig laden, entspricht der "" Pfad " /calc , und die folgende Ansicht wird angezeigt. Warum? Denn in unserer app.routing.ts CalcComponent .

Nachdem Sie die Grundlagen des Routings gelernt haben, haben Sie eine Anmeldeseite und eine Route für Ihre Bewerbung erstellt! Als nächstes werden wir einige fortgeschrittene Konzepte im Angular Routing einführen.

Erweitertes Routing -Konzept

Dynamische Routing -Parameter

In einer einzigen Seitenanwendung können Sie mehrere Aktionen verwenden, um auf eine bestimmte Route zuzugreifen. In unserer Taschenrechneranwendung ist das URL -Snippet beispielsweise : . Der Dickdarm teilt dem Router mit, dass der eingegebene Wert nicht Teil der URL ist, sondern ein Routing -Parameter.

 exportieren const genehmigt: Routen = [
    {Pfad: '', Komponente: Homecomponent},
    {Pfad: 'Calc/: Operation', Komponente: Calccomponent},
    {Pfad: '**', Komponente: NotFoundComponent}
];

Wir haben eine dynamische Route festgelegt. Wenn wir nun einen Link erstellen oder eine Adresse in der Adressleiste eingeben, können wir die Addition, Aufteilung und weitere Operationen problemlos austauschen.

Jetzt ist unsere nächste Herausforderung. Wie werden Sie dynamische Routing -Informationen aus der Routing -URL extrahieren? Meistens verwenden wir ngOnInit und seine Rolle im Komponentenlebenszyklus.

Um auf dynamische Routing -Parameter zuzugreifen, verwenden wir ActivatedRoute , um params einzuschließen. Abonnieren Sie ngOnInit . Wenn wir von einem Parameter zum anderen übertragen, wird die tatsächliche Routing -Komponente nicht zerstört. Dies ist die Technologie, die Angular verwendet, um die Leistung zu verbessern. Wenn Sie sich bei ActivatedRoute abonnieren.

 // Die Route ist definiert als Path = '/Calc/: Operation'

import {component, oninit} aus '@angular/core';
import {activeatedRoute} aus '@angular/router';

@Komponente({
  Selektor: 'Calc.comPonent',
  templateurl: './calc.component.html' '
})
Exportklasse Calccomponent implementiert auf {
  Operation: String;
  Konstruktor (private Route: ActivatedRoute) {}
  ngoninit () {
    this.route.params.Subscribe ((params) => this.operation = params.operation);
  }
}

Erstellen Sie eine Unterroutine

Bisher haben wir Routen gesehen, die nur einstufig enthalten. Lassen Sie uns nun mehrstufiges Routing definieren. Beispielsweise wäre ein einstufiges Routing /calc/addition .

Wir können /calc/addition eine andere Komponente haben. Um dieses Verhalten zu erreichen, verwenden wir es in der übergeordneten Komponente<router-outlet></router-outlet> Die Route wird darin gerendert.

Manchmal verwenden wir möglicherweise überhaupt nicht bestimmte Komponenten der übergeordneten Route. In diesem Fall können wir die Komponente aus der Routing -Erklärung löschen. Dies wird auch als komponentloses Routing bezeichnet.

Hier ist ein einfaches Beispiel, das Ihnen helfen kann, diese Konzepte zu verstehen.

 // Route Export const Routen definieren: Routen = [
  {
    Pfad: 'Calc',
    Komponente: Calccomponent,
    Kinder: [
      {Pfad: 'Addition', Komponente: calcadditionComponent},
      {Pfad: 'Subtraktion', Komponente: CalcSubstractionComponent},
    ],
  },
];

// komponentlose Routing -Exportkonstantrouten: Routen = [[
  {
    Pfad: 'Calc',
    Kinder: [
      {Pfad: 'Addition', Komponente: calcadditionComponent},
      {Pfad: 'Subtraktion', Komponente: calcSubtractionComponent},
    ],
  },
];
@Ngmodule ({{{
  Importe: [Browsmodule, Routermodule.FORROOT (Routen)],
})


// Erstellen Sie die übergeordnete Komponente import {component} aus '@angular/core';

@Komponente({
  Selektor: 'Calc.comPonent',
  Vorlage: `
<div>
<calc-addition></calc-addition>
<calc-subtraction></calc-subtraction>
<router-outlet></router-outlet>
</div>
  `,
})
Exportklasse Calccomponent {}

Holen Sie sich Routen aus verschiedenen Modulen

Wenn Anwendungen wachsen, kann das Handling Routing eine Herausforderung sein. Manchmal müssen Sie die Route aus verschiedenen Modulen bekommen. In diesem Fall können Sie RouterModule.forChild() verwenden.

Beginnen wir mit einem Beispiel:

 // Subroutine Export const Routen: Routen = [
  {
    Weg: '',
    Komponente: Calccomponent,
    Kinder: [
      {Pfad: 'Addition', Komponente: calcadditionComponent},
      {Pfad: 'Subtraktion', Komponente: calcSubtractionComponent},
    ],
  },
];

@Ngmodule ({{{
  Importe: [CommonModule, Rousterodule.forchild (Routen)],
})
Exportklasse CalcModule {}

// übergeordnete Routen -Export -CONT -Routen: Routen = [
  {
    Pfad: 'Calc',
    Loadchildren: './calc/calc.module#calcmodule',
  },
];

@Ngmodule ({{{
  Importe: [Browsmodule, Routermodule.FORROOT (Routen)],
})
Exportklasse AppModule {}

Einige interessante Aspekte aus dem obigen Code sind:

• Wir haben einen leeren Weg. Dies liegt daran, dass wir nicht möchten, dass der Routenpfad zu CalcModule in Root /calc/** importiert werden muss.

Zusammenfassen

In diesem Tutorial haben Sie die Grundlagen des Umgangs mit dem Routing in Angular gelernt. Sie haben gelernt, wie man Routen definiert und wie man durch Winkelanwendungen unterschiedlich navigiert. Die in diesem Artikel diskutierten Konzepte behandeln die Grundlagen. Sobald Sie die Grundlagen gemeistert haben, können Sie sich tiefer in fortschrittlichere Winkel -Routing -Konzepte wie Aktivierungswächter, Routing -Navigation und vieles mehr befassen.

Das obige ist der detaillierte Inhalt vonAnfängerführung zu Angular: Routing. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!