详解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自适应IFrame高度(支持嵌套 兼容IE,ff,safafi,chrome)
Mar 28 Javascript
jquery mobile changepage的三种传参方法介绍
Sep 13 Javascript
js 动态为textbox添加下拉框数据源的方法
Apr 24 Javascript
angular中使用路由和$location切换视图
Jan 23 Javascript
jQuery动态追加页面数据以及事件委托详解
May 06 jQuery
requirejs按需加载angularjs文件实例
Jun 08 Javascript
浅谈对Angular中的生命周期钩子的理解
Jul 31 Javascript
AngularJS实现的省市二级联动功能示例【可对选项实现增删】
Oct 26 Javascript
vue.js 2.0实现简单分页效果
Jul 29 Javascript
Vue-cli3.X使用px2 rem遇到的问题及解决方法
Aug 08 Javascript
Vue+Java+Base64实现条码解析的示例
Sep 23 Javascript
使用JS实现鼠标放上图片进行放大离开实现缩小功能
Jan 27 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
php print EOF实现方法
2009/05/21 PHP
解决PHP在DOS命令行下却无法链接MySQL的技术笔记
2010/12/29 PHP
php strnatcmp()函数的用法总结
2013/11/27 PHP
Yii列表定义与使用分页方法小结(3种方法)
2016/07/15 PHP
PHP中set_include_path()函数相关用法分析
2016/07/18 PHP
浅谈Laravel模板实体转义带来的坑
2019/10/22 PHP
Jquery 绑定时间实现代码
2011/05/03 Javascript
引用外部js乱码问题分析及解决方案
2013/04/12 Javascript
JavaScript 作用域链解析
2014/11/13 Javascript
javascript实现的右下角弹窗实例
2015/04/24 Javascript
简介JavaScript中用于处理正切的Math.tan()方法
2015/06/15 Javascript
js简单实现标签云效果实例
2015/08/06 Javascript
简介alert()与console.log()的不同
2015/08/26 Javascript
JavaScript实现简单的tab选项卡切换
2016/01/05 Javascript
jquery 全选、全不选、反选效果的实现代码【推荐】
2016/05/05 Javascript
Angularjs上传文件组件flowjs功能
2017/08/07 Javascript
JavaScript数组push方法使用注意事项
2017/10/30 Javascript
全面解析vue router 基本使用(动态路由,嵌套路由)
2018/09/02 Javascript
JavaScript函数的特性与应用实践深入详解
2018/12/30 Javascript
详解webpack 最简打包结果分析
2019/02/20 Javascript
vue计算属性无法监听到数组内部变化的解决方案
2019/11/06 Javascript
Python字符串详细介绍
2015/05/09 Python
深入理解Python中的*重复运算符
2017/10/28 Python
python简单图片操作:打开\显示\保存图像方法介绍
2017/11/23 Python
Python数据结构之哈夫曼树定义与使用方法示例
2018/04/22 Python
Python Numpy 控制台完全输出ndarray的实现
2020/02/19 Python
Amara德国:家居饰品、设计师品牌和豪华礼品
2019/05/20 全球购物
全球最受追捧的运动服品牌领先数字目的地:Stylerunner
2020/11/25 全球购物
长青弘远的面试题
2012/06/09 面试题
安全检查与奖惩制度
2014/01/23 职场文书
葬礼司仪主持词
2014/03/31 职场文书
党员评议表自我评价范文
2014/10/20 职场文书
党建工作整改措施
2014/10/28 职场文书
2014年新农村建设工作总结
2014/12/01 职场文书
红色经典观后感
2015/06/18 职场文书
nginx sticky实现基于cookie负载均衡示例详解
2022/12/24 Servers