Angular如何在路由时传递数据，有以下三种方式

那么究竟有哪几种传递参数的方式呢？

可能你已经在其他地方看到类似方法，那你可以直接看第三种方法的接收方式，稍有不同
1.在查询参数中传递数据
类似与此：/product?id=1&name=2 => ActivatedRoute.queryParams[name]
传递方式：/product?id=1&name=2
在目标组件中的接收方式：ActivatedRoute.queryParams[name]
代码如下：
在a标签中添加queryParams属性，并赋予想要传递的数据{name: ‘wqq’}

目标组件ts文件：

通过插值表达式把productName显示到前台页面上：

2.在路由路径中传递数据
类似于此：{ path:/product/:name } => /product/wqq => ActivatedRoute.params[name]。
（1）定义路由路径时指定参数的名字：{ path:/product/:name }，参数名id。
（2）实际的路径中携带参数值：[routerLink]="['/product','wqq']"。
（3）路由的目标组件中接收参数：ActivatedRoute.params[name]
代码如下：
（1）

（2）

（3）目标组件ts文件：

通过插值表达式把productName显示到前台页面上：注意此处url与前一种的区别。

3.在路由配置中传递数据
类似与此：{path:/product, component:ProductComponent, data:[{a ：1，b ：2}，{c : 4, d : 8}]} => ActivatedRouter.data.subscribe( (params: Params) => {this.home = params[0]['a']});
(1)在路由配置中，通过data参数定义静态的数据，可定义多个对象:

data:[{a ：1，b ：2}，{c : 4, d : 8}]

(2)通过参数订阅的方式取得要获取指定数组下标索引的属性值：

 ActivatedRouter.data.subscribe( (params: Params) => {this.home = params[0]['a']})

代码如下：

目标组件ts文件：

控制台结果：这里我们取的是索引为1的数组的c属性值：16