此处介绍三种方式

方式一:

     问号后面带的参数,

        例如:/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. 浅谈css中渐变衔接

    无论transition还是keyframes,如何让变化更自然,这是前端应该考虑的问题. 这里,我简单总结下自己的方法. 以实践为例子. 1.图像渐变 @keyframes looppic{ fro ...

  2. 何为仿射变换(Affine Transformation)

    http://www.cnblogs.com/ghj1976/p/5199086.html 变换模型是指根据待匹配图像与背景图像之间几何畸变的情况,所选择的能最佳拟合两幅图像之间变化的几何变换模型.可 ...

  3. Python tricks(4) -- with statement

    简介 with是从2.5版本引入的一个语法. 这个语法本身是为了解决try..finally繁琐的释放各类资源(文件句柄, Lock等)的问题. 如果想在旧版本中使用这个功能, 直接引入future模 ...

  4. Linux服务器---网络配置

    禁止ping 有些时候为了保护主机,会禁止其他机器对主机进行ping操作.Ping命令用的是ICMP协议,只要禁用ICMP协议,那么ping方法就无法检测这台主机.关于ICMP协议的配置文件是“/pr ...

  5. Linux服务器---基础设置

    Centos分辨率      virtualbox里新安装的Centos 7 的分辨率默认的应该是800*600. 如果是‘最小化安装’的Centos7 进入的就是命令模式 .如果安装的是带有GUI的 ...

  6. web前端----jQuery动画效果

    动画效果 // 基本 show([s,[e],[fn]]) hide([s,[e],[fn]]) toggle([s],[e],[fn]) // 滑动 slideDown([s],[e],[fn]) ...

  7. pythoy的configparser模块

    生成配置文件的模块 DEFAULT块,在以块为单位取块的值时,都会出现 import configparser config = configparser.ConfigParser() #相当于生成了 ...

  8. xml声明中的standalone属性

    晚上,在测试tinyxml的时候,发现其中声明了<?xml version="1.0" standalone="no" ?>,经查,其含义为stan ...

  9. JRebel for IntelliJ 热部署破解方法

    1.打开idea,然后打开设置. 2.点击Plugins 3.重启之后点击 4.下载激活JRebel的插件,下载地址:https://github.com/ilanyu/ReverseProxy/re ...

  10. Serv-U FTP服务器安装及使用图解教程

    Serv-U,是一种被广泛运用的FTP服务器端软件,支持3x/9x/ME/NT/2K等全Windows系列.可以设定多个FTP服务器.限定登录用户的权限.登录主目录及空间大小等,功能非常完备. 它具有 ...