一共3种方法。

  1.问号后面带的参数,获取参数的方式:ActivatedRoute.queryParams[id]

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

代码:html

<h4>Messages</h4>
<p>Total:{{msgs.total}}</p>
<div *ngFor="let item of msgs.data">
<b>{{item.name}}</b>:
<a [routerLink]="['/next',item.id]" [queryParams]="{id:item.id, msg:item.msg, name:item.name}">{{item.msg}}</a>
<a routerLink="/final">Reply</a><p></p>
</div>

  获取参数js

ngOnInit() {
let obj = this.route.queryParams["_value"];
console.log(obj);
}

  2.冒号形式,

        例如:path:/product/:id

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

上边html代码中第一个routelink就是。

另外需配置路由

{
path:'listDetail/:id',
component:ListDetailComponent
}
参考https://segmentfault.com/a/1190000012268186

  3.js里的路径跳转

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

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

Angular5 路由传参的3种方法的更多相关文章

  1. vue 路由传参的三种方法

    API在这里  https://router.vuejs.org/guide/essentials/navigation.html 第一种传参 通过路由属性中的name来确定匹配的路由,通过param ...

  2. angular5 路由传参的几种方式

    此处介绍三种方式 方式一: 问号后面带的参数, 例如:/product?id=1&name=iphone还可以是: [routerLink]="['/books']" [q ...

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

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

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

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

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

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

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

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

  7. vue路由传参的几种基本方式

    原文地址 this.$router.push跳转 现有如下场景,点击父组件的li元素跳转到子组件中,并携带参数,便于子组件获取数据.父组件中: <li v-for="article i ...

  8. angularJS 传参的四种方法 【修改】

    1. 基于ui-router的页面跳转传参(1) 在AngularJS的app.js中用ui-router定义路由,比如现在有两个页面,一个页面(producers.html)放置了多个produce ...

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

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

随机推荐

  1. oracle11g导出表时会发现少表,空表导不出解决方案

    oracle11g导出表时会发现少表,空表导不出解决方案.   一:背景引入 oracle11g用exp命令导出数据库表时,有时会发现只导出了一部分表时而且不会报错,原因是有空表没有进行导出,之前一直 ...

  2. 将Excel上千条数据写入到数据库中

    简要说明:因工作需要,需要一张Excel表格中的所有数据导入到数据库中.如下表,当然这只是一部分,一共一千多条. 前期处理: 首先要保证上图中的Excel表格中的数据不能为空,如果有为空的数据,可以稍 ...

  3. flask +gevent+nginx+Gunicorn+supervisor部署flask应用

    上篇   可以完美部署flask ,但是视乎在结合gevent+apscheduler 实现异步非阻塞后台和定时任务的时候视乎不是那么完美.请教了前辈,决定使用flask+gevent+nginx+g ...

  4. Hive:把一段包含中文的sql脚本粘贴到beeline client运行中文乱码

    背景: 在做项目过程中不可能hive表中都是非中文字段.在最近做的项目中就遇到需要在beeline界面上执行查询脚本,但脚本中包含中文,正常一个脚本用文本写好后,粘贴到beeline窗口运行时,发现中 ...

  5. hdu 6095 Rikka with Competition---思维题贪心

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=6095 题目大意: 任意两个人相比,相差大于K,分低的淘汰,否则两人都有可能赢,剩下的继续比,问有最多 ...

  6. arc的安装

    安装:   # sudo apt-get install php5 php5-curl   # ubuntu 系统 # sudo yum install php5 # centos 系统   # cd ...

  7. 【Swift】IOS开发中自定义转场动画

    在IOS开发中,我们model另外一个控制器的时候,一般都使用默认的转场动画. 其实我们可以自定义一些转场动画.达到不同的转场效果. 步骤如下:(photoBrowser是目标控制器) 1.在源控制器 ...

  8. hibernate--hibernate.cfg.xml常用配置详解

    在hibernate中最重要的两个配置文件就是hibernate.cfg.xml和xxx.hbm.xml文件,前者是一些配置信息,后者是配置表和对象的映射关系,可以通过注解的方式来取代. 本篇文章主要 ...

  9. 用DotTrace 来分析.NET-Core程序

    1. 前言   看园子里面讲dotTrace 的文章不多,最近也有这方面的需要,于是去搜索了一下,.NET 性能分析方面的工具.目的呢,主要是想发现我的代码中,哪些代码占用了最多时间,来进行优化.主要 ...

  10. [HNOI2015]落忆枫音

    题目描述 「恒逸,你相信灵魂的存在吗?」 郭恒逸和姚枫茜漫步在枫音乡的街道上.望着漫天飞舞的红枫,枫茜突然问出这样一个问题. 「相信吧.不然我们是什么,一团肉吗?要不是有灵魂......我们也不可能再 ...