angular|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']})
【angular|Angular如何在路由时传递数据，有以下三种方式】代码如下：
文章图片
目标组件ts文件：
文章图片
控制台结果：这里我们取的是索引为1的数组的c属性值：16
文章图片
推荐阅读
- 任时光绽放成六月繁花
- 我从来不做坏事
- 考研英语阅读终极解决方案——阅读理解如何巧拿高分
- 樱花雨
- 如何寻找情感问答App的分析切入点
- 拍照一年啦，如果你想了解我，那就请先看看这篇文章
- mybatisplus如何在xml的连表查询中使用queryWrapper
- MybatisPlus使用queryWrapper如何实现复杂查询
- 人如果没梦想，和咸鱼有什么区别（自媒体时代把握住就能咸鱼翻身）
- 如何在Mac中的文件选择框中打开系统隐藏文件夹