Detaillierte Erläuterung der Verwendung von Angular5-Routing-Parametern

Dieses Mal werde ich Ihnen eine detaillierte Erklärung der Verwendung von Angular5Routing-Parameterübergabe und der Vorsichtsmaßnahmen bei der Verwendung von Angular5-Routing-Parameterübergabe geben. Das Folgende ist eine praktische Erklärung Fall, werfen wir einen Blick darauf.

1. Die Parameter nach dem Fragezeichen, der Weg, um die Parameter zu erhalten: ActivatedRoute.queryParams[id]

Zum Beispiel: /product?id=1&name= iphone kann auch sein: [ routerLink]= "['/books']" [ queryParams]= "{bookname:'《《生》'}

Code: html

<h4>Messages</h4>
<p>Total:{{msgs.total}}</p>
<p *ngFor="let item of msgs.data">
 <b>{{item.name}}</b>:
 <a [routerLink]="[&#39;/next&#39;,item.id]" [queryParams]="{id:item.id, msg:item.msg, name:item.name}">{{item.msg}}</a>
 <a routerLink="/final">Reply</a><p></p>
</p>

Get Parameter js

ngOnInit() {
 let obj = this.route.queryParams["_value"];
 console.log(obj);
}

2. Doppelpunktform,

Zum Beispiel: path:/product/:id

So erhalten Sie Parameter: ActivatedRoute.params[ id]

Der erste Routelink im obigen HTML-Code ist

Außerdem muss das Routing konfiguriert werden

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

Siehe http://www.jb51.net/ Article/139125.htm

Pfadsprung in 3.js

Zum Beispiel: path:/product,component:ProductComponent,data:[{madeInChina:true}]}

So erhalten Sie Parameter: ActivatedRoute.snapshot .data[0][madeInChina]

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Bitte beachten Sie andere verwandte Artikel auf der chinesischen PHP-Website für spannendere Inhalte!

Empfohlene Lektüre:

JS implementiert die Transparenzverlaufsfunktion

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

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung von Angular5-Routing-Parametern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!