angular路由详解三(路由参数传递)

我们经常用路由传递参数,路由主要有三种方式:

第一种:在查询参数中传递数据

{path:"address/:id"}   => address/1  => ActivatedRoute.param[id]

  在路由中传递

  <a [routerLink] = "['/address',1]"></a>

  点击事件传递

  this.router.navigate([‘/address’,2])

  //在不同等级页面跳转可以用snapshot(快照方式)

  this.id = this.routeInfo.snapshot.params["id"]

  //相同组件跳转需要使用subscribe(订阅方式)

   this.routeInfo.params.subscribe((params: Params) => this.id = params["id"]  )

第二种:在路由路径中传递参数数据

<a [routerLink] = "['/address']" queryParams= "{id:1}"></a>
this.id = this.routeInfo.snapshot.queryParams["id"]//拿到路由中的参数
 
第三种:在路由配置中传递数据
{path:'home', component: HomeComponent,data:[{isPush:true}] }  => ActivatedRoute.data[0][isPush]
  //同样也是有snapshot和subscribe两种类型
  this.isPush = this.routeInfo.snapshot.data[0]["isPush"]
 
 如果有用请支持,谢谢!

 

 
 
 

转载于:https://www.cnblogs.com/chzlh/p/7718064.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值