Angular5 路由传参的3种方法

　　一共3种方法。

　　1.问号后面带的参数，获取参数的方式：ActivatedRoute.queryParams[id]

　　　　　　　　例如：/product?id=1&name=iphone还可以是： [routerLink]="['/books']" [queryParams]="{bookname:'《活着》'}

代码：html

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

　　获取参数js

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

　　2.冒号形式，

　　　　　　　　例如：path:/product/:id

　　　　　　　　获取参数的方式：ActivatedRoute.params[id]

上边html代码中第一个routelink就是。

另外需配置路由

{
    path:'listDetail/:id',
    component:ListDetailComponent
  }
参考https://segmentfault.com/a/1190000012268186

　　3.js里的路径跳转

扫描二维码关注公众号，回复： 84676 查看本文章

　　　　　　　　例如：path:/product,component:ProductComponent,data:[{madeInChina:true}]} 

　　　　　　　　获取参数的方式： ActivatedRoute.snapshot.data[0][madeInChina]