浅谈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 相关文章推荐
javascript Firefox与IE 替换节点的方法
Feb 24 Javascript
input输入框的自动匹配(原生代码)
Mar 19 Javascript
javascript打印大全(打印页面设置/打印预览代码)
Mar 29 Javascript
JQuery事件e参数的方法preventDefault()取消默认行为
Sep 26 Javascript
让JavaScript和其它资源并发下载的方法
Oct 16 Javascript
浅析javascript操作 cookie对象
Dec 26 Javascript
页面向下滚动ajax获取数据的实现方法(兼容手机)
May 24 Javascript
javascript的函数劫持浅析
Sep 26 Javascript
js 作用域和变量详解
Feb 16 Javascript
Javascript实现一个简单的输入关键字添加标签效果实例
Jun 01 Javascript
jquery UI实现autocomplete在获取焦点时得到显示列表功能示例
Jun 04 jQuery
微信小程序 select 下拉框组件功能
Sep 09 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教程孙仲岳主讲
2008/01/07 PHP
php ios推送(代码)
2013/07/01 PHP
超级强大的表单验证
2006/06/26 Javascript
使用javascript访问XML数据的实例
2006/12/27 Javascript
javascript之大字符串的连接的StringBuffer 类
2007/05/08 Javascript
jquery 事件对象属性小结
2010/04/27 Javascript
基于jQuery实现下拉收缩(展开与折叠)特效
2012/12/25 Javascript
js播放wav文件(源码)
2013/04/22 Javascript
微信小程序form表单组件示例代码
2018/07/15 Javascript
Javascript读写cookie的实例源码
2019/03/16 Javascript
浅谈发布订阅模式与观察者模式
2019/04/09 Javascript
Openlayers实现距离面积测量
2020/09/28 Javascript
[02:04]完美世界城市挑战赛秋季赛报名开始 谁是solo路人王?
2019/10/10 DOTA
python 中的列表解析和生成表达式
2011/03/10 Python
Python 代码性能优化技巧分享
2012/08/07 Python
python获取beautifulphoto随机某图片代码实例
2013/12/18 Python
python比较2个xml内容的方法
2015/05/11 Python
Python学习思维导图(必看篇)
2017/06/26 Python
python实现复制文件到指定目录
2019/10/16 Python
python3 BeautifulSoup模块使用字典的方法抓取a标签内的数据示例
2019/11/28 Python
python 正则表达式参数替换实例详解
2020/01/17 Python
Python进行统计建模
2020/08/10 Python
python递归函数用法详解
2020/10/26 Python
基于pycharm 项目和项目文件命名规则的介绍
2021/01/15 Python
如何进行Linux分区优化
2013/02/12 面试题
经营理念标语
2014/06/21 职场文书
2014教师教育实践活动对照检查材料思想汇报
2014/09/21 职场文书
我爱我班主题班会
2015/08/13 职场文书
2016年心理学教育培训学习心得体会
2016/01/12 职场文书
外出考察学习心得体会
2016/01/18 职场文书
《风筝》教学反思
2016/02/23 职场文书
创业计划书之宠物店
2019/09/19 职场文书
vue3如何优雅的实现移动端登录注册模块
2021/03/29 Vue.js
CSS实现多个元素在盒子内两端对齐效果
2021/03/30 HTML / CSS
Python&Matlab实现樱花的绘制
2022/04/07 Python
JS高级程序设计之class继承重点详解
2022/07/07 Javascript