此处介绍三种方式

方式一:

     问号后面带的参数,

        例如:/product?id=1&name=iphone还可以是: [routerLink]="['/books']" [queryParams]="{bookname:'《活着》'}

             获取参数的方式:ActivatedRoute.queryParams[id]

方式二:

     冒号形式,

        例如:path:/product/:id

        获取参数的方式:ActivatedRoute.params[id]

方式三:

     js里的路径跳转

        例如:path:/product,component:ProductComponent,data:[{madeInChina:true}]}

        获取参数的方式: ActivatedRoute.snapshot.data[0][madeInChina]

     

angular5 路由传参的几种方式的更多相关文章

  1. Vue路由传参的几种方式

    原 Vue路由传参的几种方式 2018年07月28日 23:52:40 广积粮缓称王 阅读数 12613   前言:顾名思义,vue路由传参是指嵌套路由时父路由向子路由传递参数,否则操作无效.传参方式 ...

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

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

  3. vue-router 路由传参的几种方式,刷新页面参数丢失

    常见场景:点击列表详情,跳转到详情内页,传递id参数获取详情数据. 我们先来看看路由跳转的几种方式: 1.通过params方式传参 通过$route.push的path携带参数方式 // 路由配置 { ...

  4. vue路由传参的三种方式区别(params,query)

    最近在做一个项目涉及到列表到详情页的参数的传递,网上搜索一下路由传参,结合自己的写法找到一种适合自己的,不过也对三种写法都有了了解,在此记录一下 <ul class="table_in ...

  5. Vue-router路由传参的三种方式

    本文简单介绍下三种路由传参: (1)在路由中配置 { path : ‘/home/:id’, name : ‘Dome’, component } 然后写调用的时候 this.$router.push ...

  6. vue里面路由传参的三种方式

    1.方式一 通过query的方式也就是?的方式路径会显示传递的参数 HTML的方式<router-link :to="{name:xxx,query:{page:1,code:8899 ...

  7. vue路由传参的三种方式

    方式一 通过query方式传参 这种情况下 query传递的参数会显示在url后面 this.$router.push({ path: '/detail', query: { id: id } }) ...

  8. React中使用 react-router-dom 路由传参的三种方式详解【含V5.x、V6.x】!!!

    路由传值的三种方式(v5.x) params参数 //路由链接(携带参数): <Link to='/demo/test/tom/18'}>详情</Link> //或 <L ...

  9. react --- 路由传参的几种方式

    1.params 优势 : 刷新地址栏,参数依然存在缺点:只能传字符串,并且,如果传的值太多的话,url会变得长而丑陋. 2.query 优势:传参优雅,传递参数可传对象:缺点:刷新地址栏,参数丢失 ...

随机推荐

  1. <转>ORACLE EBS中查看某个Request的Output File

    由于某些权限的限制,有时候哪怕System Administrator职责也只能看到某个Request信息,但是不能查看它的Output File(在“Requests Summary”窗口中“Vie ...

  2. sql可重复执行语句例子

    1.添加字段 SET @add_key_type_to_report = (SELECT IF( (SELECT count(1) FROM INFORMATION_SCHEMA.COLUMNS WH ...

  3. VS2010/MFC编程入门之三十七(工具栏:工具栏的创建、停靠与使用)

    鸡啄米在上一节教程中讲了工具栏资源及CToolBar类,本节继续讲解工具栏的相关知识,主要内容包括工具栏的创建.停靠与使用. 工具栏的使用 上一节中鸡啄米提到过,一般情况下工具栏中的按钮在菜单栏中都有 ...

  4. 2018-2019-2 20165209 《网络对抗技术》Exp5:MSF基础应用

    2018-2019-2 20165209 <网络对抗技术>Exp5:MSF基础应用 目录 一.基础问题回答和实验内容 二.攻击实例 主动攻击的实践 ms08_067 payload/gen ...

  5. ajax请求为异步操作时,返回的数据不会被并列函数执行

    ajax请求为异步操作时,返回的数据不会被并列函数执行

  6. json-lib-2.4-jdk15.jar所需全部JAR包.rar java jsoup解析开彩网api接口json数据实例

    json-lib-2.4-jdk15.jar所需全部JAR包.rar  java jsoup解析开彩网api接口json数据实例 json-lib-2.4-jdk15.jar所需全部JAR包.rar  ...

  7. jenkin环境搭建

      Jenkins是一个用Java编写的开源的持续集成(CI)工具,可持续.自动地构建/测试软件项目,监控一些定时执行的任务.具有开源,支持多平台和插件扩展,安装简单,界面化管理等特点. 1.下载并解 ...

  8. c++第五天:默认初始化

    1.算数类型.(整型和浮点型) 类型决定了数据所占的比特数以及该如何解释这些比特的内容. 练习2.1... 各种类型在计算机中所占的比特数不同,解释方法不同.有符号要花费一个比特存储符号,最大正值要比 ...

  9. P4052 [JSOI2007]文本生成器

    P4052 [JSOI2007]文本生成器 AC自动机+dp 优秀题解传送门 设f[ i ][ j ]表示串的长度为 i ,当前在 j 点时不可识别的串的方案数 最后用总方案数减去不可识别方案数就是答 ...

  10. 解决Linux下jdk版本与安装版本不一致

    解决Linux下jdk版本与安装版本不一致 在Linux下安装jdk后,利用java -version查看版本使,发现不是自己所安装的jdk版本; 解决方案: which java ——查看默认的jd ...