Detailed explanation of the use of Angular5 routing parameters

This time I will bring you a detailed explanation of the use of Angular5routingpassing parameters. What are the notes when using Angular5 routing parameters? The following is a practical case, let’s take a look.

1. The parameters after the question mark, the way to obtain the parameters: ActivatedRoute.queryParams[id]

For example: /product?id=1&name=iphone can also be ：[ 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 parameters js

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

2. Colon form,

For example: path:/product/:id

How to obtain parameters: ActivatedRoute.params[id]

The first routelink in the above html code is.

In addition, routing needs to be configured

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

Refer to http://www.jb51.net/article/139125.htm

3.Path jump in js

For example: path:/product,component:ProductComponent,data:[{madeInChina:true}]}

How to get parameters: ActivatedRoute.snapshot .data[0][madeInChina]

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

JS implements transparency gradient function

Detailed explanation of the steps to use .vue in vscode

The above is the detailed content of Detailed explanation of the use of Angular5 routing parameters. For more information, please follow other related articles on the PHP Chinese website!