好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

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"]

 

 如果有用请支持,谢谢!

 

 

 

 

查看更多关于angular路由详解三(路由参数传递)的详细内容...

  阅读:37次