Detaillierte Erläuterung der Angular-Routing-Grundlagen

1. Routing-bezogene Objekte

Router und RouterLink haben dieselbe Funktion, nämlich Navigation. Im Controller wird der Router und in der Vorlage wird RouterLink verwendet.

2. Standort der Routing-Objekte

1. Routenobjekt

Die Konfiguration erfolgt im Modul. Routen bestehen aus einer Reihe von Konfigurationsinformationen, von denen jede mindestens zwei Attribute enthält: Pfad und Komponente.

2. RouterOutlet

In der Vorlage

3.RouterLink

Anleitung zum Generieren von Links in Vorlagen und Ändern von URLs

4. Router

Rufen Sie im Controller die Navigationsmethode des Router-Objekts auf, um die Routen zu wechseln.

5. AktivierteRoute

Beim Routing werden Daten über die URL übergeben und im ActivatedRoute-Objekt gespeichert.

3. Routing-Konfiguration

Bei Verwendung des Parameters ng new --routing wird eine zusätzliche Datei app-routing.module.ts generiert

importiere { NgModule } von '@angular/core';
importiere {Routen, RouterModul} von '@angular/router';

const-Routen: Routen = [];

@NgModule({
  Importe: [RouterModule.forRoot(Routen)],
  Exporte: [RouterModul]
})
exportiere Klasse AppRoutingModule { }

Wird automatisch in app.module.ts importiert.

Generieren Sie zwei Komponenten: Home-Komponente und Komponenten-Komponente.

const routes: Routen = [
  {Pfad: '', Komponente: HomeComponent}, //Pfad ist leer{Pfad: 'Produkt', Komponente: ProductComponent}
];

Beachten:

1. Die Pfadkonfiguration darf nicht mit einem Schrägstrich beginnen und kann nicht als Pfad:'/Produkt' konfiguriert werden.

Da der Angular-Router URLs analysiert und generiert, können Sie beim Navigieren zwischen mehreren Ansichten freie relative und absolute Pfade verwenden, wenn die URLs nicht mit / beginnen.

2. Wenn Sie einen Pfad in eine Vorlage schreiben, muss dieser mit / beginnen.

Denn die Verwendung eines Schrägstrichs plus einem . gibt an, ob Sie zur Stammroute (/) oder zur Unterroute (./) navigieren möchten.

/ bedeutet, zur Stammroute zu navigieren und von der Ebene aus zu suchen, auf der die Stammroute konfiguriert ist.

<a [routerLink]="['/']">Startseite</a>

3. Komponenteninhalt unter <router-outlet> anzeigen

4. Der Parameter routerLink ist ein Array statt einer Zeichenfolge

Weil beim Routing Parameter übergeben werden können.

4. Navigieren durch das Router-Objekt im Code

Fügen Sie der Vorlage eine Schaltfläche hinzu

<input type="button" value="Produktdetails" (click)="toProductDetails()">

Verwenden Sie router.navigate, um im Controller zu navigieren.

Der Navigationsparameter wird genauso konfiguriert wie der RouterLink-Parameter.

importiere { Komponente } aus '@angular/core';
importiere { Router } von '@angular/router';

@Komponente({
  Selektor: ‚App-Root‘,
  Vorlagen-URL: "./app.component.html",
  styleUrls: ['./app.component.css']
})
exportiere Klasse AppComponent {
  Konstruktor (privater Router: Router) {
  }
  zuProduktDetails(){
    this.router.navigate(['/produkt']);
  }
}

Das Klicken auf eine Schaltfläche hat dieselbe Wirkung wie das Klicken auf einen Link.

5. Einen nicht vorhandenen Pfad konfigurieren

Generieren Sie die Code-404-Komponente, um anzuzeigen, dass die Seite nicht existiert.

Die erste übereinstimmende Route hat Vorrang, daher sollte die ** Platzhalterroute ans Ende gesetzt werden.

const routes: Routen = [
  { Pfad: '', Komponente: HomeComponent }, // Pfad ist leer { Pfad: 'Produkt', Komponente: ProductComponent },
  { Pfad: '**', Komponente: Code404Component }
]; 

6. Umleitungsrouting

Leitet eine Adresse an eine andere angegebene Komponente um

www.aaa.com => www.aaa.com/produkte

www.aaa.com/x => www.aaa.com/y Der Benutzer hat möglicherweise die Adresse x mit einem Lesezeichen versehen.

Verwenden des Umleitungsroutings

const routes: Routen = [
  { path: '', redirectTo : 'home', pathMatch:'full' }, //Der Pfad ist leer { path: 'home', component: HomeComponent },
  { Pfad: 'Produkt', Komponente: Produktkomponente },
  { Pfad: '**', Komponente: Code404Component }
];

7. Datenweitergabe beim Routing

Es gibt 3 Möglichkeiten

1. Übergeben von Daten in Abfrageparametern

2. Datenweiterleitung im Routing-Pfad

Beim Definieren des Routingpfads müssen Sie den Parameternamen angeben und den Parameter in den tatsächlichen Pfad übernehmen.

3. Übergabe von Daten in der Routing-Konfiguration

Oben finden Sie eine ausführliche Erläuterung der Grundlagen des Angular-Routings. Weitere Informationen zu den Grundlagen des Angular-Routings finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!