Detaillierte Erläuterung der Angular-Routing-Unterrouten

1. Subroutensyntax

2. Beispiele

Auf der Produktdetailseite werden neben den Produkt-ID-Informationen auch die Produktbeschreibung und die Informationen zum Verkäufer angezeigt.

Die Komponenten „Produktbeschreibung“ und „Verkäuferinformationen“ werden über eine Unterweiterleitung innerhalb der Komponente „Produktdetails“ angezeigt.

1. Erstellen Sie 2 neue Komponenten und ändern Sie deren Inhalt

ng g Komponente productDesc
ng g KomponentenverkäuferInfo

Der entscheidende Punkt besteht darin, die Verkäuferinformationskomponente so zu ändern, dass die Verkäufer-ID angezeigt wird.

importiere { Komponente, OnInit } von '@angular/core';
importiere { ActivatedRoute } von '@angular/router';

@Komponente({
  Selektor: ‚App-Verkäufer-Info‘,
  Vorlagen-URL: "./seller-info.component.html",
  styleUrls: ['./seller-info.component.css']
})
Exportklasse SellerInfoComponent implementiert OnInit {
  private Verkäufer-ID: Nummer;
  Konstruktor(private Routeninfo: AktivierteRoute) { }

  ngOnInit() {
    this.sellerId = this.routeInfo.snapshot.params["id"];
  }

}

2. Ändern Sie die Routing-Konfiguration

Untergeordnete Routen zur Produktkomponente hinzufügen

const routes: Routen = [
  { path: '', redirectTo : 'home',pathMatch:'full' }, //Der Pfad ist leer { path: 'home', component: HomeComponent },
  { Pfad: 'Produkt/:ID', Komponente: Produktkomponente, untergeordnete Elemente:[
    { Pfad: '', Komponente: ProductDescComponent },
    { Pfad: 'Verkäufer/:id', Komponente: SellerInfoComponent }
  ] },
  { Pfad: '**', Komponente: Code404Component }
];

3. Ändern Sie die Vorlage von product.component.ts

Hinweis: routerLink muss als ./ konfiguriert werden und / kann nicht erneut verwendet werden.

<p>
  Dies ist die Produktinformationskomponente</p>
<p>
  Die Produkt-ID lautet: {{productId}}
</p>

<a [routerLink]="['./']">Produktbeschreibung</a>
<a [routerLink]="['./seller',99]">Informationen zum Verkäufer</a>
<Router-Steckdose></Router-Steckdose>

Wirkung:

Die Hauptroute ist /product/2 und die Unterroute ist eine leere Zeichenfolge:

Die Produktdetailseite der Hauptroute wird angezeigt, und die Produktbeschreibungskomponente, die der leeren Zeichenfolge der Unterroute entspricht, wird ebenfalls angezeigt.

Klicken Sie auf den Link mit den Verkäuferinformationen:

Der URL-Pfad wird: http://localhost:4201/product/2/seller/99.

Außerdem werden die Unterroute „seller/99“ und die entsprechende Komponente „sellerInfo“ angezeigt.

Beachten:

1. Der Socket-Router-Out bildet eine Eltern-Kind-Beziehung und kann unendlich verschachtelt werden

2. Alle Routing-Informationen werden auf Modulebene in app.routing.module.ts konfiguriert.

Routing-Informationen liegen auf Modulebene und die Komponenten selbst kennen keine Routing-bezogenen Informationen.

Eltern-Kind-Beziehung zwischen Sockets – untergeordnetes Routing.

Geschwisterbeziehung zwischen Sockets - Hilfsrouting.

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