So verwenden Sie Angular5-Routing zur Wertübergabe

Dieses Mal zeige ich Ihnen, wie Sie Angular5RouteWertübergabe verwenden und welche Vorsichtsmaßnahmen für die Verwendung der Angular5-Route zum Übergeben von Werten gelten Ein praktischer Fall.

Derzeit wurde Angular auf die stabile Version Angular5 aktualisiert. Dieses Upgrade ist kleiner, schneller und stabiler! Der größte Nachteil des Routings besteht darin, dass es in Angular nicht verschachtelt werden kann. Routing in Angular ist nicht nur ein sogenannter Hero-List-Jump zu Hero-Details! Erstellen Sie für jeden Helden eine Detailseite, damit Routing-Parameter ins Spiel kommen! Identifizieren Sie die Details dieses Helden anhand der von der Route übergebenen Parameter!

Lassen Sie uns nun den Routing-Wert im Detail erklären . Erstens besteht eine Möglichkeit darin, die Einzelwert-ID der offiziellen Website einzugeben, um zu den Details zu navigieren, die andere besteht darin, mehrere Daten einzugeben!

1 Einzelwertübergabe

['/hero', hero.id]

rreeDas Obige ist ein Beispiel von der offiziellen Website

Lassen Sie es uns mit meinem eigenen Beispiel vorstellen:

Die erste ist die Listenseite und die Sprungmethode

Kopieren der Code Der Code lautet wie folgt:

{{item .name}}

Dann konfigurieren Sie die Route: (Die Methode zur Übergabe eines einzelnen Werts muss in der Detailkomponente Routing konfiguriert werden)

 <ul class="items">
  <li *ngFor="let hero of heroes$ | async"
   [class.selected]="hero.id === selectedId">
   <a [routerLink]="[&#39;/hero&#39;, hero.id]">
    <span class="badge">{{ hero.id }}</span>{{ hero.name }}
   </a>
  </li>
 </ul>

wird an get übergeben Die Parameter werden im ngOnInit

Lebenszyklus der Detailkomponente

{
  path:'listDetail/:id',
  component:ListDetailComponent
 },

2 abgerufen. In unseren üblichen komplexen Geschäftsszenarien müssen wir mehrere Daten übertragen zu diesem Zeitpunkt? Zu diesem Zeitpunkt verwenden wir queryParams

Code kopieren Der Code lautet wie folgt:

{{data.name}}

I Sie können die Daten auch direkt hier abrufen und einen Parameter einfügen, um die HTML-Struktur zu vereinfachen. Nun stellt sich die Frage, wie man solche mehrwertigen eingehenden Routing-Parameter konfiguriert. Was soll ich tun, wenn dieser Parameter nicht festgelegt ist? Tatsächlich erfordert diese Methode keine Routing-Konfiguration! Lesen Sie den Fall in diesem Artikel. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Wie man JS bedient, um einfache Falt- und Entfaltungsanimationen zu implementieren

Wie man JS bedient, um es zu implementieren Transparenzverlaufsanimation

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Angular5-Routing zur Wertübergabe. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!