浅谈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 相关文章推荐
js实现运行代码需要刷新的解决方法
Aug 18 Javascript
关于javascript function对象那些迷惑分析
Oct 24 Javascript
ASP.NET jQuery 实例13 原创jQuery文本框字符限制插件-TextArea Counter
Feb 03 Javascript
jQuery中delegate与on的用法与区别示例介绍
Dec 20 Javascript
js防止DIV布局滚动时闪动的解决方法
Oct 30 Javascript
javascript基于DOM实现权限选择实例分析
May 14 Javascript
基于jQuey实现鼠标滑过变色(整行变色)
Dec 07 Javascript
BootStrapValidator初使用教程详解
Feb 10 Javascript
详解JS: reduce方法实现 webpack多文件入口
Feb 14 Javascript
解决vue-cli + webpack 新建项目出错的问题
Mar 20 Javascript
详解vue 路由跳转四种方式 (带参数)
Apr 28 Javascript
解决layui的使用以及针对select、radio等表单组件不显示的问题
Sep 05 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函数
2011/05/31 PHP
PHP实现多进程并行操作的详解(可做守护进程)
2013/06/18 PHP
php实现MySQL数据库备份与还原类实例
2014/12/09 PHP
laravel框架如何设置公共头和公共尾
2019/10/22 PHP
jQuery+CSS 实现的超Sexy下拉菜单
2010/01/17 Javascript
jquery validate使用攻略 第四步
2010/07/01 Javascript
JavaScript的parseInt 取整使用
2011/05/09 Javascript
鼠标选择动态改变网页背景颜色的JS代码
2013/12/10 Javascript
node.js中使用node-schedule实现定时任务实例
2014/06/03 Javascript
Jquery自定义button按钮的几种方法
2014/06/11 Javascript
jquery实现在页面加载的时自动为日期插件添加当前日期
2014/08/20 Javascript
JS实现适合于后台使用的动画折叠菜单效果
2015/09/21 Javascript
JS获取字符串实际长度(包含汉字)的简单方法
2016/08/11 Javascript
关于JSON与JSONP简单总结
2016/08/16 Javascript
Javascript基于jQuery UI实现选中区域拖拽效果
2016/11/25 Javascript
jQuery动态生成表格及右键菜单功能示例
2017/01/13 Javascript
微信小程序 后台登录(非微信账号)实例详解
2017/03/31 Javascript
Vue数组更新及过滤排序功能
2017/08/10 Javascript
Vue filter格式化时间戳时间成标准日期格式的方法
2018/09/16 Javascript
JS学习笔记之闭包小案例分析
2019/05/29 Javascript
vue项目引入ts步骤(小结)
2019/10/31 Javascript
[03:23]我的刀塔你不可能这么可爱 第一期金萌萌的故事
2014/06/20 DOTA
[16:14]教你分分钟做大人:米拉娜(HEROS)
2014/11/24 DOTA
在Python中append以及extend返回None的例子
2019/07/20 Python
TensorFlow tf.nn.max_pool实现池化操作方式
2020/01/04 Python
Python如何使用队列方式实现多线程爬虫
2020/05/12 Python
HTML5 虚拟键盘出现挡住输入框的解决办法
2017/02/14 HTML / CSS
澳大利亚小众服装品牌:Maurie & Eve
2018/03/27 全球购物
数百万免费的图形资源:Freepik
2020/09/21 全球购物
机械制造专业个人的自我评价
2013/12/28 职场文书
企业承诺书怎么写
2014/05/24 职场文书
地陪导游欢迎词
2015/01/26 职场文书
2016年全国爱眼日宣传教育活动总结
2016/04/05 职场文书
MySQL 隔离数据列和前缀索引的使用总结
2021/05/14 MySQL
golang实现浏览器导出excel文件功能
2022/03/25 Golang
Spring Boot 底层原理基础深度解析
2022/04/03 Java/Android