angular4.0在路由Router时传递参数、获取参数的最灵活、阅读性最好的写法。
2017-09-21 17:34
1266 查看
研究ng4的官网,终于找到了我想要的方法。我想要的结果是用‘&’拼接参数传送,这样阅读上是最好的。否则很多‘/’的拼接,容易混淆参数和组件名称。
一般我们页面跳转传递参数都是这样的格式:
但是在SPA单页应用中却是下面的结果居多【初级视频都是这样敷衍的】
那么怎么实现我说的结果呢?重点开始了。
实现从product页面跳转到product-detail页面。
step1:在app-routing.module.ts中配置路由。
step2:在product.ts中书写跳转,并传参数。
step3:在product-detail.ts中获取传递过来的参数productId、title
ok,就这样完美的解决了。谢谢大婶的指教和点评。
一般我们页面跳转传递参数都是这样的格式:
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.navigateByUrl('product-detail' + '?productId=8&title=moon'); }
step3:在product-detail.ts中获取传递过来的参数productId、title
constructor( private activatedRoute: ActivatedRoute, //这里需要注入ActivatedRoute模块 ) {} ngOnInit() { let productId = this.activatedRoute.queryParams['_value']['productId']; let title = this.activatedRoute.queryParams['_value']['title']; }
ok,就这样完美的解决了。谢谢大婶的指教和点评。
相关文章推荐
- angular4.0中路由传递参数、获取参数最nice的写法
- angular4.0路由传递参数、获取参数最nice的写法
- 浅谈angular4.0中路由传递参数、获取参数最nice的写法
- vue-router中定义动态路由、嵌套路由,并动态获取参数
- AngulaJS路由 ui-router 传递多个参数
- Vue中的 this.$router.push() 参数获取 (通过路由传参)
- AngularJS路由系列(4)-- UI-Router的$state服务、路由事件、获取路由参数
- vue-router2.0动态路由获取参数
- vue教程3-05 vue组件数据传递、父子组件数据获取,slot,router路由
- react-router 获取路由参数
- 详解vue-router2.0动态路由获取参数
- 关于react-router4中路由的配置,传参,跳转,可选参数写法
- router-link传递参数并获取
- 纯html静态页面怎么获取参数(用javascript传递页面参数)
- js获取url传递参数
- vue通过 vue.mixin(混合)实现 任意页面记录滚动条位置(路由router.query参数一致) 并跳转到上次的位置
- ASP.NET MVC中获取URL地址参数的两种写法
- SpringMVC常用获取传递参数的方法
- 探寻main函数的“标准”写法,以及获取main函数的参数、返回值
- jquery通过ajax-json访问java后台传递参数,通过request.getParameter获取不到参数的说明