Zusammenfassung der Routing-Wertübertragungsmethoden von Angular5

Dieses Mal werde ich Ihnen eine Zusammenfassung der Angular5-Routing--Wertübergabemethode und der Vorsichtsmaßnahmen für die Angular5-Routing-Wertübergabe geben. Das Folgende ist ein praktischer Fall , lass uns einen Blick darauf werfen.

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:

Detaillierte Erläuterung der Schritte zur Verwendung von .vue in vscode

jQuery-Traversierung von XML-Knoten und Attribute Implementierungsschritte

Das obige ist der detaillierte Inhalt vonZusammenfassung der Routing-Wertübertragungsmethoden von Angular5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!