Angular—路由传参

路由对象

两种路由跳转方式

1. 在页面中利用 RouterLink 指令

<a [routerLink]="['/product',1]">商品详情</a>

2. 在控制器中利用 Router 对象
  1）利用事件绑定

<input type="button" value="商品详情" (click)="toProductDetails()">

  2) 利用Router对象的navigate方法

三种路由传参方式

1. 在查询参数中传递数据
  形如以下形式：/product?id=1&name=2,接收时的形式：ActivatedRoute.queryParams[id]

2. 在路由路径中传递数据
  形如以下形式：{path:/product/:id} => /product/1,接收时的形式：ActivatedRoute.params[id]
  1)首先，要修改路由配置的形式

  2）修改 RouterLink 指令

<a [routerLink]="['/product',1]">商品详情</a>

  3) 接收参数的方式不同

★ 注意：以上所讲的方式是参数快照的方式，即由自身路由到自身时，使用的还是一开始初始化的参数值，snapshot：快照的意思。如果我们有路由到自身的情况时要用参数订阅方式：

3. 在路由配置中传递数据