首页 > 技术文章 > angular路由详解三(路由参数传递)

chzlh 2017-10-23 17:45 原文

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

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

{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"]
 
 如果有用请支持,谢谢!

 

 
 
 

推荐阅读