angular路由传参和获取路由参数的方法
1.首先是需要导入的模块
import { Router } from "@angular/router";//路由传参用到 import{ActivatedRoute,Params} from '@angular/router';//获取路由传参用到
2.第二步,注入服务
constructor( private activateInfo:ActivatedRoute
private router:Router
)
路由传参的方法
this.router.navigate(['/product/commodity/edit'], {
queryParams: {
id: res.data,
type: 'clone'
}
})
获取路由传参的办法
constructor( private activateInfo:ActivatedRoute
private router:Router
) {
activateInfo.queryParams.subscribe(queryParams => {
let Id = queryParams.id;
let type = queryParams.type;)}
}
这个要获取的路由参数如图
,
可以看出来 id和type字段是从url里拿到的参数
angular路由传参和获取路由参数的方法的更多相关文章
- vue 路由传参中刷新页面参数丢失 及传参的几种方式?
在页面跳转中,我通过路由传参,结果发现页面参数丢失了.路径返回了根目录.... 1. 先说下路由传参的几种方式吧? 比如:<div v-for="item in items" ...
- Vue 路由的简单使用(命名路由、query路由传参、params路由传参)
1 # Vue 路由 2 # 1.理解:一个路由(toute)就是一组映射关系(key-value),多个路由需要路由器(router)进行管理 3 # 2.前端路由:key是路径,value是组件 ...
- Vue中this.$router.push参数获取(通过路由传参)【路由跳转的方法】
传递参数的方法: 1.Params 由于动态路由也是传递params的,所以在 this.$router.push() 方法中 path不能和params一起使用,否则params将无效.需要用nam ...
- vue-router2.0 组件之间传参及获取动态参数
<li v-for=" el in hotLins" > <router-link :to="{path:'details',query: {id:el ...
- asp.net 通过ajax方式调用webmethod方法使用自定义类传参及获取返回参数
实体类 public class User { public int Id { get; set; } public string Name { get; se ...
- vue 路由传参 以及获取参数
1.通过query实现: <router-link :to="{ name:'home',query:{id:1} }">跳转页面</router-link> ...
- vue路由传参和获取参数
参考链接 https://router.vuejs.org/zh/guide/essentials/passing-props.html#%E5%B8%83%E5%B0%94%E6%A8%A1%E5% ...
- Vue路由传参及传参后刷新导致参数消失处理
项目功能需要,要从列表页跳转到第三方提供的URL上(这里第三方页面我是通过iframe引入在详情页,目的是点击返回时可以通过keepAlive让列表页不刷新,如果不通过iframe直接跳第三方链接,那 ...
- vue路由传参的三种方式以及解决vue路由传参页面刷新参数丢失问题
最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决:Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下: 方法一:params传参: this.$r ...
随机推荐
- WinForm实现Rabbitmq官网6个案例-Hello World
先上代码 namespace RabbitMQDemo { public partial class HelloWorld : Form { string queueName1 = "hel ...
- JavaScript Standard Style
这是 JavaScript standard 代码规范的全文. 掌握本规范的最好方法是安装并在自己的代码中使用它. https://github.com/standard/standard/blob/ ...
- LintCode2016年算法比赛----二叉树的所有路径
二叉树的所有路径 题目描述 给定一棵二叉树,找从根节点到叶子节点的所有路径 样例 给出下面这课二叉树: 1 / \ 2 3 \ 5 所有根到叶子的路径为: [ "1->2->5& ...
- MyEclipse 2017/2018 安装与破解 图文教程
SSM 框架-02-MyEclipse 2017/2018 安装与破解 现在在学J2EE,然后使用的工具就是 MyEclipse,现在就抛弃 Eclipse 了,我就不多说它俩的区别了,但是 MyEc ...
- 安卓app开发-05-Android xml布局详细介绍
安卓app开发-05-Android xml布局详细介绍 虽然说有 墨刀,墨客 这些图形化开发工具来做 Android 的界面设计,但是我们还是离不开要去学习做安卓原生app,学习 xml 布局还是必 ...
- AndroidStudio中logcat不输出信息
2017年11月27日,记住这个日子.今天第一次感觉到被批评了,由于自己技术知识储备不足导致今天的外出工作等于浪费时间.正式因为这个logcat不输出信息的问题,前几回不输出信息了我就从新启动了开发工 ...
- mac ASP.NET5
不写1行代码,在Mac上体验ASP.NET 5的最简单方法 昨天微软发布了ASP.NET 5 beta2(详见ASP.NET 5 Beta2 发布),对ASP.NET 5的好奇心又被激发了. 今天 ...
- linux_day3
1.grep与find的区别? grep是查找文件内的字符而find则是查找文件 2.显示/etc/passwd中以nologin结尾的行 3. 输入ip addr命令后,过滤出包含ip的行 ip a ...
- VUE知识day3_vue插件总结
- Docker bridge探索
作者:ellen.sun链接:http://blog.daocloud.io/docker-bridge/著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 早期的二层网络中,bri ...