浅谈angular4.0中路由传递参数、获取参数最nice的写法


Posted in Javascript onMarch 12, 2018

研究ng4的官网,终于找到了我想要的方法。我想要的结果是用‘&'拼接参数传送,这样阅读上是最好的。

否则很多‘/'的拼接,容易混淆参数和组件名称。

一般我们页面跳转传递参数都是这样的格式:

http://angular.io/api?uid=1&username=moon

但是在SPA单页应用中却是下面的结果居多【初级视频都是这样敷衍的】

http://angular.io/api/1/moon

那么怎么实现我说的结果呢?

重点开始了。

实现从product页面跳转到product-detail页面。

step1:在app-routing.module.ts中配置路由。

const routes: Routes = [
{
 path: 'product',
 component: ProductComponent,
 },
 {
 path: 'product-detail',
 component: ProductDetailComponent,
 }
];

step2:在product.ts中书写跳转,并传参数。

constructor(
 private router: Router, //这里需要注入Router模块
){}
jumpHandle(){
 //这是在html中绑定的click跳转事件
 this.router.navigate(['product-detail'], {
 queryParams: {
  productId: '1',
  title: 'moon'
 }
 });
}

step3:在product-detail.ts中获取传递过来的参数productId、title

constructor( 
 private activatedRoute: ActivatedRoute, //这里需要注入ActivatedRoute模块 
) { 
 activatedRoute.queryParams.subscribe(queryParams => { 
 let productId = queryParams.productId; 
 let title = queryParams.title; 
 }); 
}

ok,就这样完美的解决了。

以上这篇浅谈angular4.0中路由传递参数、获取参数最nice的写法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 与NVelocity 产生冲突的解决方法
Jun 13 Javascript
jquery 实现checkbox全选,反选,全不选等功能代码(奇数)
Oct 24 Javascript
轻松实现javascript图片轮播特效
Jan 13 Javascript
基于canvas实现的绚丽圆圈效果完整实例
Jan 26 Javascript
weUI应用之JS常用信息提示弹层的封装
Nov 21 Javascript
Vue2几种常见开局方式详解
Sep 09 Javascript
javascript高级模块化require.js的具体使用方法
Oct 31 Javascript
Express的HTTP重定向到HTTPS的方法
Jun 06 Javascript
vue根据值给予不同class的实例
Sep 29 Javascript
如何封装了一个vue移动端下拉加载下一页数据的组件
Jan 06 Javascript
element表格翻页第2页从1开始编号(后端从0开始分页)
Dec 10 Javascript
vuecli3.x中轻松4步带你使用tinymce的步骤
Jun 25 Javascript
Vue 仿QQ左滑删除组件功能
Mar 12 #Javascript
JS中touchstart事件与click事件冲突的解决方法
Mar 12 #Javascript
Node.JS循环删除非空文件夹及子目录下的所有文件
Mar 12 #Javascript
Javascript中prototype与__proto__的关系详解
Mar 11 #Javascript
js中document.write和document.writeln的区别
Mar 11 #Javascript
Javascript 编码约定(编码规范)
Mar 11 #Javascript
JavaScript获取移动设备型号的实现代码(JS获取手机型号和系统)
Mar 10 #Javascript
You might like
很让人受教的 提高php代码质量36计
2012/09/05 PHP
PHP定时更新程序设计思路分享
2014/06/10 PHP
getimagesize获取图片尺寸实例
2014/11/15 PHP
分享最受欢迎的5款PHP框架
2014/11/27 PHP
PHP实现判断数组是一维、二维或几维的方法
2017/02/06 PHP
Javascript与flash交互通信基础教程
2008/08/07 Javascript
js几个验证函数代码
2010/03/25 Javascript
jQuery实现单行文字间歇向上滚动源代码
2013/06/02 Javascript
Jquery的hover方法让鼠标经过li时背景变色
2013/09/06 Javascript
Angular2 (RC5) 路由与导航详解
2016/09/21 Javascript
使用node.js中的Buffer类处理二进制数据的方法
2016/11/26 Javascript
JS中with的替代方法与String中的正则方法详解
2016/12/23 Javascript
Bootstrap面板学习使用
2017/02/09 Javascript
100多个基础常用JS函数和语法集合大全
2017/02/16 Javascript
jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法
2017/03/03 Javascript
js模仿微信朋友圈计算时间显示几天/几小时/几分钟/几秒之前
2017/04/27 Javascript
抖音上用记事本编写爱心小程序教程
2019/04/17 Javascript
Vue-CLI 项目在pycharm中配置方法
2019/08/30 Javascript
python socket 超时设置 errno 10054
2014/07/01 Python
使用Python导出Excel图表以及导出为图片的方法
2015/11/07 Python
python中的格式化输出用法总结
2016/07/28 Python
python获取微信小程序手机号并绑定遇到的坑
2018/11/19 Python
浅谈Python 列表字典赋值的陷阱
2019/01/20 Python
python使用Plotly绘图工具绘制柱状图
2019/04/01 Python
Python 使用matplotlib模块模拟掷骰子
2019/08/08 Python
Python将视频或者动态图gif逐帧保存为图片的方法
2019/09/10 Python
浅谈python输出列表元素的所有排列形式
2020/02/26 Python
一些关于python 装饰器的个人理解
2020/08/31 Python
Pycharm Available Package无法显示/安装包的问题Error Loading Package List解决
2020/09/18 Python
2019年Java面试必问之经典试题
2012/09/12 面试题
英智兴达软件测试笔试题
2016/10/12 面试题
租赁协议书范本
2014/04/22 职场文书
高中军训的心得体会
2014/09/01 职场文书
大学生党员批评与自我批评
2014/09/28 职场文书
民间借贷借条范本
2015/05/25 职场文书
Springboot如何使用logback实现多环境配置?
2021/06/16 Java/Android