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);
}
上一篇: Java中终止线程的三种方法