angular4中组件之间页面切换的数据传递，通过路由传递数据

清疚 2022-02-18 15:05 206阅读 0赞

例如在表格中有一个详情按钮，跳转到另外一个页面，

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70][]

首先需要在所在页面和跳转页面引入路由组件和跳转界面路由组件

![20190417173545103.png][]

selectMsg(productID:number,productName:any,productCome:any)\{

// 跳转页面

return this.router.navigate(\['product-element',\{"productID":productID,"productName":productName,"productCome":productCome\}\]);

\}

product-element'是需要跳转的路由，\{\}里面是传递的值，这个值可已通过你点击事件来获取

例如表格中的数据data

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70 1][]

跳转的页面也需要引入路由配置

import \{Router,ActivatedRoute\} from '@angular/router';

然后在constructor中进行数据的获取

![20190417174926406.png][]

这样就可以使得一个页面的数据传递到另一个界面。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70]: /images/20220218/540bf54647b84768bf7a920ae9146403.png
[20190417173545103.png]: /images/20220218/0373195a09f949c98aa0d0cbe3197f32.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70 1]: /images/20220218/4d3583023898482fbdb3cf241ad20d6d.png
[20190417174926406.png]: /images/20220218/3d1a59c0df3b40df9593118f2ad1756f.png

发表评论取消回复

表情：

评论列表（有 0 条评论，206人围观）

还没有评论，来说两句吧...

相关阅读

相关 TornadoFx 页面之间的数据传递

和Android开发一样,经常遇到两个页面之间需要进行数据的交互传输,本文讲解下TornadoFx框架中,页面之间的数据传递步骤方法方法1 - 使用构造方法首先,我

左手的ㄟ右手/ 2024年03月17日 14:54/ 0 赞/ 76 阅读

相关 Vue父子组件之间传递数据

父向子：v-bind()+props 父组件绑定属性向子组件传递数据，子组件通过props进行数据的接收。父组件代码如下： <template>

怼烎@/ 2023年09月28日 11:59/ 0 赞/ 114 阅读

相关 Vue 路由组件页面传递参数

文章目录 1 vue路由传参 $route对象 props传递布尔模式

比眉伴天荒/ 2023年06月06日 03:51/ 0 赞/ 14 阅读

相关在vue中通过使用$attrs实现组件之间的数据传递

> 组件之间传递数据的方式有很多种，之所以有这么多种方式，是为了满足在不同场景不同条件下的使用。一般有三种方式： 1. 通过 `props` 的方式向子组件传递(

r囧r小猫/ 2022年12月13日 04:33/ 0 赞/ 137 阅读

相关页面之间dataset数据传递方法

在网络上两个页面之间进行数据传递有很多中办法，这里我用了。net的现成方法，把表格数据传递到另外的页面。 db.table 数据 ——》dataset －－》xml－

桃扇骨/ 2022年08月25日 08:07/ 0 赞/ 192 阅读

相关通过 session 完成 action 之间的数据传递

初始化：HttpServletRequest request = ServletActionContext.getRequest(); 存值：request.getSessi

叁歲伎倆/ 2022年07月15日 11:18/ 0 赞/ 141 阅读

相关通过 session 完成 action 之间的数据传递

初始化：HttpServletRequest request = ServletActionContext.getRequest(); 存值：request.getSessi

梦里梦外;/ 2022年07月15日 11:18/ 0 赞/ 152 阅读

相关 (五)、Angular4.0 路由传递参数

一、在查询参数中传递参数修改app.component.html中的商品详情页a标签 <a [routerLink]="['/product']" [que

「爱情、让人受尽委屈。」/ 2022年05月28日 01:10/ 0 赞/ 179 阅读

相关父子组件的数据传递

<counter :count="0"></counter> <counter :count="1"></counter>加冒号0是数字，不加冒号0是字符父组件向

冷不防/ 2022年05月25日 13:59/ 0 赞/ 219 阅读

相关 angular4中组件之间页面切换的数据传递，通过路由传递数据

例如在表格中有一个详情按钮，跳转到另外一个页面， ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly

清疚/ 2022年02月18日 15:05/ 0 赞/ 207 阅读