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

一.路由传值

传递

<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);
}