Angular:路由参数传递

发布时间:2019-06-11 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了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,请注明来意。