浅谈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简单设置与使用cookie的方法
Jan 22 Javascript
javascript html5摇一摇功能的实现
Apr 19 Javascript
JS 对象(Object)和字符串(String)互转方法
May 20 Javascript
jquery插件方式实现table查询功能的简单实例
Jun 06 Javascript
AngularJS 过滤器的简单实例
Jul 27 Javascript
echarts整合多个类似option的方法实例
Jul 10 Javascript
JS数组实现分类统计实例代码
Sep 30 Javascript
VUE+Element UI实现简单的表格行内编辑效果的示例的代码
Oct 31 Javascript
详解微信小程序用定时器实现倒计时效果
Apr 30 Javascript
Vue 自适应高度表格的实现方法
May 13 Javascript
vue中用 async/await 来处理异步操作
Jul 18 Javascript
JS代码编译器Monaco使用方法
Jun 11 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/09/28 PHP
PHP 使用header函数设置HTTP头的示例解析 表头
2013/06/17 PHP
ThinkPHP表单自动验证实例
2014/10/13 PHP
EarthLiveSharp中cloudinary的CDN图片缓存自动清理python脚本
2017/04/04 PHP
在JavaScript中遭遇级联表达式陷阱
2007/03/08 Javascript
JavaScript事件处理器中的event参数使用介绍
2013/05/24 Javascript
JS替换文本域内的回车示例
2014/02/18 Javascript
javascript写的一个模拟阅读小说的程序
2014/04/04 Javascript
使用JQ来编写最基本的淡入淡出效果附演示动画
2014/10/31 Javascript
JS实现异步上传压缩图片
2017/04/22 Javascript
详解Vue2.X的路由管理记录之 钩子函数(切割流水线)
2017/05/02 Javascript
详解基于 axios 的 Vue 项目 http 请求优化
2017/09/04 Javascript
简单实现vue验证码60秒倒计时功能
2017/10/11 Javascript
vue 组件中slot插口的具体用法
2018/04/03 Javascript
原生JS实现列表子元素顺序反转的方法分析
2018/07/02 Javascript
微信小程序实现页面下拉刷新和上拉加载功能详解
2018/12/03 Javascript
详解如何给React-Router添加路由页面切换时的过渡动画
2019/04/25 Javascript
微信小程序上传多图到服务器并获取返回的路径
2019/05/05 Javascript
如何利用JS将手机号中间四位变成*号
2020/09/29 Javascript
Python装饰器原理与简单用法实例分析
2018/04/29 Python
python 借助numpy保存数据为csv格式的实现方法
2018/07/04 Python
Python深拷贝与浅拷贝用法实例分析
2019/05/05 Python
python实战串口助手_解决8串口多个发送的问题
2019/06/12 Python
简单了解python PEP的一些知识
2019/07/13 Python
Python中zip()函数的简单用法举例
2019/09/02 Python
pymysql的简单封装代码实例
2020/01/08 Python
keras自动编码器实现系列之卷积自动编码器操作
2020/07/03 Python
Python中logging日志记录到文件及自动分割的操作代码
2020/08/05 Python
使用html5 canvas绘制圆环动效
2019/06/03 HTML / CSS
html5视频常用API接口的实战示例
2020/03/20 HTML / CSS
老总助理工作岗位职责
2014/02/06 职场文书
简单租房协议书范本
2014/08/20 职场文书
2015年高考寄语或鼓励的话
2015/03/23 职场文书
假如给我三天光明读书笔记
2015/06/26 职场文书
vue backtop组件的实现完整代码
2021/04/07 Vue.js
基于CSS制作创意端午节专属加载特效
2022/06/01 HTML / CSS