在小说网站做编辑怎么找,怎么添加网站备案号,番禺网站开发,课程中心网站建设内容有3种方式1、在查询参数中传递数据2、在路由路径中传递数据定义路由路径时就要指定参数名字#xff0c;在实际路径中携带参数。3、在路由配置中传递数据一、在查询参数中传递数据第一步#xff1a;修改模版中商品详情链接#xff0c;带一个指令queryParams商品详情效果…有3种方式1、在查询参数中传递数据2、在路由路径中传递数据定义路由路径时就要指定参数名字在实际路径中携带参数。3、在路由配置中传递数据一、在查询参数中传递数据第一步修改模版中商品详情链接带一个指令queryParams商品详情效果点击链接会传一个商品id为1的参数过去。第二步在商品详情组件中接收参数用ActivatedRoute接收id并赋值给productId显示在模版中。import { Component, OnInit } from angular/core;import { ActivatedRoute } from angular/router;Component({selector:app-product,templateUrl:./product.component.html,styleUrls: [./product.component.css]})exportclass ProductComponent implementsOnInit {privateproductId: number;constructor(privaterouteInfo: ActivatedRoute) { }ngOnInit() {this.productId this.routeInfo.snapshot.queryParams[id];}}修改模版显示这里是商品信息组件商品id是{{productId}}二、 在路由路径中传递数据第一步修改路由path属性使其可以携带数据{ path: product/:id, component: ProductComponent },第二步修改路由链接的参数来传递数据传一个2过去。商品详情效果第三步商品详情信息组件从url中取idthis.productId this.routeInfo.snapshot.params[id];三、参数快照和参数订阅1、参数快照问题参数快照就是从snapshot中获取参数。this.productId this.routeInfo.snapshot.params[id];修改商品详情按钮的响应函数传递一个3过去。toProductDetails(){this.router.navigate([/product,3]);}问题先点主页再点商品详情链接正确跳转到商品详情组件再点商品详情按钮问题来来url中id变为来3内容显示中id没有变还是2。原因从home组件路由到component组件商品详情组件会被创建它的constructor(),ngOnInit()会被调用一次。但是从商品详情组件直接路由到商品详情由于商品详情组件在点击商品详情按钮时已经被创建了它不会再次被创建ngOnInit()方法不会再次被创建。所以productId依然保存着第一次被创建时候的值。解决办法参数订阅。2、参数订阅rxjs的subscribe方法。ngOnInit() {this.routeInfo.params.subscribe((params: Params) this.productIdparams[id]);}问题得以解决。获取路由参数时候确定一个组件不会从自身路由到自身可以通过参数快照方式获取参数。不确定则用参数订阅方式获取。本文作者starof,因知识本身在变化作者也在不断学习成长文章内容也不定时更新为避免误导读者方便追根溯源请诸位转载注明出处http://www.cnblogs.com/starof/p/9006185.html 有问题欢迎与我讨论共同进步。
