欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Angular中路由跳转并携带参数的三种方式

程序员文章站 2022-05-18 15:30:45
...

一.路由传值

传递
<a [routerLink]="['/devicepay']" [queryParams]="{id:key}">
接收
import {ActivatedRoute} from '@angular/router'
constructor(public route:ActivatedRoute) { }

this.route.queryParams.subscribe((res)=>{
	console.log(res)
})

二.动态路由传值

动态路由需要定义
{ path: 'devicepay/:id',component:DevicepayComponent},
传递
<a [routerLink]="['/devicepay/',key]">
this.router.navigate([`/devicepay/`${name}])
接收
import {ActivatedRoute} from '@angular/router'
constructor(public route:ActivatedRoute) { }
this.route.params.subscribe((res)=>{
	console.log(res)
})

三.JS跳转

传递
import { Router} from '@angular/router'
constructor( public router:Router) { }

navigate(key):void{
    this.router.navigate(['/devicepay/'],{queryParams:{id:key}})
}
接收
constructor(private route: ActivatedRoute) {
   console.log(this.route.queryParams);
}
相关标签: angular