angular4.0在路由Router时传递参数、获取参数的最灵活、阅读性最好的写法。
来源:互联网 发布:java中switch是什么 编辑:程序博客网 时间:2024/06/01 07:26
研究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.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,就这样完美的解决了。谢谢大婶的指教和点评。
阅读全文
0 0
- angular4.0在路由Router时传递参数、获取参数的最灵活、阅读性最好的写法。
- angular4.0中路由传递参数、获取参数最nice的写法
- angular4路由1(路由传递参数)
- Angular基础1 在路由时传递参数的方法
- 在一个组件使用router-link进行路由时传递一个参数,在另一个组件接收
- vue的路由传递参数!
- vue-router在同一个路由下切换,取不到变化的路由参数
- Angular4.0之路由传递数据的三种方式
- python获取参数的写法
- servlet获取不到Angular4 post过来的参数
- AngulaJS路由 ui-router 传递多个参数
- MyBatis传递多个参数的写法
- 启动活动---传递参数的最佳写法
- ui-router传递参数
- ui-router 参数传递
- vue-router传递参数
- Vue router 参数传递
- springMVC获取传递的参数
- POJ-1789 Truck History(prim算法,最小生成树)
- 子网掩码和IP段计算
- jre和jdk
- BZOJ2435 道路修建 [DFS][内嵌汇编]
- Intellij IDEA的tomcat部署机制
- angular4.0在路由Router时传递参数、获取参数的最灵活、阅读性最好的写法。
- 表达式语言引用
- 百宝云免费的在线企业信息管理系统
- SQLServer与Mysql的一些语句
- Mac开启使用任何来源的APP
- AbstractRoutingDataSource与ThreadLocal
- 帧同步相关
- 山西美食
- hdu 5289 Assignment