详解Angular5 路由传参的3种方法


Posted in Javascript onApril 28, 2018

本文介绍了Angular5 路由传参,一共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://3water.com/article/139125.htm

3.js里的路径跳转

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 插件 web2.0分格的分页脚本,可用于ajax无刷新分页
Dec 25 Javascript
Javascript图片上传前的本地预览实例
Jun 16 Javascript
jQuery如何跳转到另一个网页 就这么简单
Dec 28 Javascript
vue2.0嵌套路由实现豆瓣电影分页功能(附demo)
Mar 13 Javascript
Vue非父子组件通信详解
Jun 12 Javascript
AngularJs实现聊天列表实时刷新功能
Jun 15 Javascript
关于vue.js发布后路径引用的问题解决
Aug 15 Javascript
在vue-cli项目中使用bootstrap的方法示例
Apr 21 Javascript
微信上传视频文件提示(推荐)
Nov 22 Javascript
使用vue开发移动端管理后台的注意事项
Mar 07 Javascript
在vue中对数组值变化的监听与重新响应渲染操作
Jul 17 Javascript
vue移动端弹起蒙层滑动禁止底部滑动操作
Jul 22 Javascript
深入理解Vue nextTick 机制
Apr 28 #Javascript
jQuery实现的电子时钟效果完整示例
Apr 28 #jQuery
vue+jquery+lodash实现滑动时顶部悬浮固定效果
Apr 28 #jQuery
Vue实现PopupWindow组件详解
Apr 28 #Javascript
详解angular路由高亮之RouterLinkActive
Apr 28 #Javascript
vue弹窗组件使用方法
Apr 28 #Javascript
学习Vue组件实例
Apr 28 #Javascript
You might like
JavaScript实现滚动栏效果的方法
2015/04/27 PHP
PHP表单数据写入MySQL数据库的代码
2016/05/31 PHP
浅谈PHP值mysql操作类
2016/06/29 PHP
实例讲解YII2中多表关联的使用方法
2017/07/21 PHP
使用户点击后退按钮使效三行代码
2007/07/07 Javascript
模仿JQuery sortable效果 代码有错但值得看看
2009/11/05 Javascript
javascript动态加载二
2012/08/22 Javascript
Extjs4 消息框去掉关闭按钮(类似Ext.Msg.alert)
2013/04/02 Javascript
JS操作iframe里的dom(实例讲解)
2014/01/29 Javascript
使用nodejs、Python写的一个简易HTTP静态文件服务器
2014/07/18 NodeJs
整理Javascript事件响应学习笔记
2015/12/02 Javascript
js和jQuery设置Opacity半透明 兼容IE6
2016/05/24 Javascript
vue.js+boostrap项目实践(案例详解)
2016/09/21 Javascript
基于jstree使用AJAX请求获取数据形成树
2017/08/29 Javascript
bootstrap+jquery项目引入文件报错的解决方法
2018/01/22 jQuery
微信小程序自定义音乐进度条的实例代码
2018/08/28 Javascript
[01:45]典藏宝瓶2+祈求者身心——这就是DOTA2TI9总奖金突破3000万美元的秘密
2019/07/21 DOTA
用Python解析XML的几种常见方法的介绍
2015/04/09 Python
Python的Django框架中从url中捕捉文本的方法
2015/07/20 Python
一波神奇的Python语句、函数与方法的使用技巧总结
2015/12/08 Python
用Python实现命令行闹钟脚本实例
2016/09/05 Python
Python Unittest根据不同测试环境跳过用例的方法
2018/12/16 Python
python绘制评估优化算法性能的测试函数
2019/06/25 Python
python使用for...else跳出双层嵌套循环的方法实例
2020/05/17 Python
Javascript 高级手势使用介绍
2013/04/21 HTML / CSS
波兰灯具、照明和LED购物网站:Lampy.pl
2019/03/11 全球购物
建筑工程专业毕业生自荐信
2013/10/19 职场文书
追悼会上的答谢词
2014/01/10 职场文书
机关工会开展学习雷锋活动总结
2014/03/01 职场文书
报关员个人职业生涯规划书
2014/03/12 职场文书
2014班子成员自我剖析材料思想汇报
2014/10/01 职场文书
论文答谢词
2015/01/20 职场文书
导游欢送词
2015/01/31 职场文书
美术教师个人工作总结
2015/02/06 职场文书
国家助学金受助感言
2015/08/01 职场文书
MySQL 计算连续登录天数
2022/05/11 MySQL