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路由传参和获取路由参数的方法的更多相关文章

  1. vue 路由传参中刷新页面参数丢失 及传参的几种方式?

    在页面跳转中,我通过路由传参,结果发现页面参数丢失了.路径返回了根目录.... 1. 先说下路由传参的几种方式吧? 比如:<div v-for="item in items" ...

  2. Vue 路由的简单使用(命名路由、query路由传参、params路由传参)

    1 # Vue 路由 2 # 1.理解:一个路由(toute)就是一组映射关系(key-value),多个路由需要路由器(router)进行管理 3 # 2.前端路由:key是路径,value是组件 ...

  3. Vue中this.$router.push参数获取(通过路由传参)【路由跳转的方法】

    传递参数的方法: 1.Params 由于动态路由也是传递params的,所以在 this.$router.push() 方法中 path不能和params一起使用,否则params将无效.需要用nam ...

  4. vue-router2.0 组件之间传参及获取动态参数

    <li v-for=" el in hotLins" > <router-link :to="{path:'details',query: {id:el ...

  5. asp.net 通过ajax方式调用webmethod方法使用自定义类传参及获取返回参数

    实体类    public class User    {        public int Id { get; set; }        public string Name { get; se ...

  6. vue 路由传参 以及获取参数

    1.通过query实现: <router-link :to="{ name:'home',query:{id:1} }">跳转页面</router-link> ...

  7. vue路由传参和获取参数

    参考链接 https://router.vuejs.org/zh/guide/essentials/passing-props.html#%E5%B8%83%E5%B0%94%E6%A8%A1%E5% ...

  8. Vue路由传参及传参后刷新导致参数消失处理

    项目功能需要,要从列表页跳转到第三方提供的URL上(这里第三方页面我是通过iframe引入在详情页,目的是点击返回时可以通过keepAlive让列表页不刷新,如果不通过iframe直接跳第三方链接,那 ...

  9. vue路由传参的三种方式以及解决vue路由传参页面刷新参数丢失问题

    最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决:Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下: 方法一:params传参: this.$r ...

随机推荐

  1. 护航SMB网络安全 应选择新一代防火墙

    当前,各种规模的企业都遭遇着日益增多的网络攻击,而其中以中小企业(SMB)为代表的广大群体则更加面临敏感数据.公司资产和知识产权不断暴露在风险中的窘境.为了帮助企业应对这一挑战,新一代防火墙的采购与部 ...

  2. 新手,再来1个 vue2入门的教程,有源码参考

    在这之前有入门的,作者写的不错的, 照着来一下,也收益颇多,上个例子是基于 "dependencies": {   "vue": "^2.2.6&qu ...

  3. (WCF) 利用WCF实现两个Process之间的通讯。

    目的: 实现两个独立的Process 之间的通讯. 实现思路: 建立一个WCF Service,然后将其Host到一个Console 程序中,然后在另外一个Console程序中引用WCF的Servic ...

  4. 使用wm_concat函数导致字符串过长

    场景:使用select wm_concat(xxxxx) from table 的时候 返回的字符串过长 解决方案 :使用to_clob 将字符串转成 clob类型,但是由于使用的前端框架不能解析cl ...

  5. spring boot(4)-html和templates

     静态页面 spring boot项目只有src目录,没有webapp目录,会将静态访问(html/图片等)映射到其自动配置的静态目录,如下 /static /public /resources ...

  6. xml-treeview转换

    XML——>treeciew using System; using System.Collections.Generic; using System.Text; using System.Wi ...

  7. C# 五大修饰符

    修饰符 访问权限 public 关键字是类型和类型成员的访问修饰符. 公共访问是允许的最高访问级别. 对访问公共成员没有限制 private 私有访问是允许的最低访问级别. 私有成员只有在声明它们的类 ...

  8. 加域(Netdom)

    客户端运行: netdom.exe join %computername% /domain:testw.com /userd:testw\adadmin /passwordd:boc.123 /reb ...

  9. Linux入门-3 Linux磁盘及文件系统管理

    1. 磁盘基本概念 1.1 磁盘结构:盘片(单碟vs多碟).磁头(读写数据) 1.2 磁盘在Linux中的表示 1.3 分区概念 2 使用fdisk进行磁盘管理 3 Linux文件系统 mke2fs ...

  10. 克隆对象__clone()方法

    有的时候我们需要在一个项目里面,使用两个或多个一样的对象,如果你使用“new”关键字重新创建对象的话,再赋值上相同的属性,这样做比较烦琐而且也容易出错,所以要根据一个对象完全克隆出一个一模一样的对象, ...