脚本宝典收集整理的这篇文章主要介绍了Angular:路由参数传递,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
路由参数传递
查询参数时传递数据
首先设置查询参数
<a [routerLink] = "['/stock']" [queryParams] = "{id:1}">股票</a>
queryParams是什么鬼
然后在跳转组件中设置ActivatedRoute,包含当前路由对象的信息
export class Stockcomponent implements OnInIT {
PRivate stockID:number;
constructor(private routeinfo:ActivatedRoute) { }
ngOnInit() {
this.stockID = this.routeInfo.snapshot.queryParams["id"];
}
}
路由路径中传递数据
首先在Path中设置:
const routes: Routes = [
{path:"",component:HomeComponent},
{path:"stock/:id",component:StockComponent},
{path:"**",component:Err404Component}
];
然后在对象的链接中设置具体的参数值:
<a [routerLink] = "['/stock',1]">股票</a>
最后在控制中:把queryParams改为params
ngOnInit() {
this.stockID = this.routeInfo.snapshot.params["id"];
}
参数快照
this.stockID = this.routeInfo.snapshot.params["id"];
参数订阅
this.routeInfo.params.subscribe((params:Params)=>this.stockID = params["id"]);
参数订阅解决了在同一页面,参数不变的问题。
路由配置中传递数据
这个是基于data的
{path:"stock/:id",component:StockComponent,data:[{isPro:true}]},
data是一个数组,里面可以放置多个对象
最后通过ActivatedRoute获取
this.isPro = this.routeInfo.snapshot.data[0].isPro;
以上是脚本宝典为你收集整理的Angular:路由参数传递全部内容,希望文章能够帮你解决Angular:路由参数传递所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。