当 url 有多个用“&”连接的变量时，如何重定向到 Angular 中的某个组件？

Question

从后端我得到以下 URL

http://localhost:4200/paypal/?paymentId=PAYID-L7LA6CT5K826252R&token=EC-1R8557872G&PayerID=8ANSA9QW

我的目标是在 link 发生时重定向到 home 组件。

目前，我正在尝试使用 angular 路由模块来执行此操作，如下所示：

const routes: Routes = [
  { path: 'home', component: HomeComponent},
  { path: 'PayPal/:paymentId&:token&:PayerID', component: HomeComponent}
];

我必须如何构建重定向到组件的路由？

Answer 1

无需在路由路径中添加这些查询参数。你只需要 paypal。在导航中，只需按查询参数导航 ，就像这样

路线

const routes: Routes = [
  { path: 'home', component: HomeComponent},
  { path: 'paypal', component: HomeComponent}
];

导航

import { ActivatedRoute, Router } from '@angular/router';

export class AppComponent  {
  constructor(
     private router: Router,
     private activeRoute: ActivatedRoute
  ) { 
     this.router.navigate(['paypal'], { queryParams: {
       paymentId: 'PAYID-L7LA6CT5K826252R',
       token: 'EC-1R8557872G',
       PayerID: '8ANSA9QW'
     }});
  }

}

此外，您可以像这样从激活的路由中获取这些查询参数

import { ActivatedRoute, Router } from '@angular/router';

export class AppComponent  {

  constructor(
     private router: Router,
     private activeRoute: ActivatedRoute
  ) { 
   // get the params only one time
   console.log(activeRoute.snapshot.queryParams, 'paypal query params');

   // or you can subscribe the query param changes
   
   activeRoute.queryParams.subscribe(params => {
         console.log(params, 'paypal query params from the subscription');
   })
  }

  
}

当 url 有多个用“&”连接的变量时，如何重定向到 Angular 中的某个组件？

How to redirect to some component in Angular when the url has multiple variables concatenated with "&"?

payment

url-routing

angular-routing

angular