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. android 原生 MediaPlayer 和 MediaCodec 的区别和联系(三)

    目录:     (4)Android 官方网站 对 MediaCodec的介绍 注:编解码器特定数据(Code-specific Data,简写为csd) 部分结合网上资料加入了补充和个人理解.请悉知 ...

  2. Spring MVC基本配置和实现(四)

    1.参数绑定:(从请求中接收参数) 1)默认支持的类型:Request,Response,Session,Model 2)基本数据类型(包含String) 3)Pojo类型 4)Vo类型 5)Conv ...

  3. 毕向东_Java基础视频教程第21天_IO流(1)

    第21天-01-IO流(对象的序列化) ObjectInputStream与ObjectOutputStream 被操作的对象需要实现Serializable接口(标记接口) 非必须, 但强烈建议所有 ...

  4. Docker Toolbox更换镜像源并下载centos7

  5. web前端与后端的理解区分

    要了解web前后端的区别,首先必须得清楚什么是web前端和web后端. 首先:web的本意是蜘蛛网和网的意思,在网页设计中我们称为网页的意思.现广泛译作网络.互联网等技术领域.表现为三种形式,即超文本 ...

  6. Python入门学习网址

    Python入门学习网址:http://www.runoob.com/python/python-install.html

  7. 【解决方案】[XCUITest] WDA is not listening at 'http://localhost:8100/'

    1. 使用Xcode 编译 WebDriver 发现端口为:serverurlhere->http://手机ip:0 <-serverurlhere 2. 解决方案: xcodebuild ...

  8. Java自学之路(新手一定要看)

    Java自学之路(新手一定要看) 转自尚学堂 JAVA自学之路 一:学会选择 为了就业,不少同学参加各种各样的培训. 决心做软件的,大多数人选的是java,或是.net,也有一些选择了手机.嵌入式.游 ...

  9. Salesforce和SAP Netweaver里数据库表的元数据设计

    从Salesforce官网可以了解到Salesforce的force.com平台里数据库表的设计:https://developer.salesforce.com/page/Multi_Tenant_ ...

  10. SQL监控:mysql及mssql数据库SQL执行过程监控审计

    转载 Seay_法师 最近生活有很大的一个变动,所以博客也搁置了很长一段时间没写,好像写博客已经成了习惯,搁置一段时间就有那么点危机感,心里总觉得不自在.所以从今天起还是要继续拾起墨笔(键盘),继续好 ...