读取路线参数 Angular答案

【问题标题】：Read route params Angular读取路线参数 Angular
【发布时间】：2021-03-21 03:47:34
【问题描述】：

我正在使用 Paypal API，在确认购买后，它会重定向到您想要的 url，我输入的 url 是“localhost:4200/shop/order”。但是，每当贝宝返回网址时，他们都会在最后的网址中添加令牌和 payerid "localhost:4200/shop/order?token=8YS089366D9655&PayerID=ASDVD4BLMH", 但是，当它回到我的 Angular 应用程序时，我有一个错误提示找不到该页面。

我尝试了几种方法来配置路由，但所有尝试都失败了。如果Angular不接受“？”和路由中的“&”。

const shopRoutingConfig:Routes = [
    {
        path:'',component:ShopAppComponent,
        children:[
            {path:'purchase',component:PurchaseComponent},
            {
                path:'order/:token/:payerid', //fail in url returned from paypal
                component:OrderComponent
            }
        ]
    }
]

@NgModule({

    imports:[
        RouterModule.forChild(shopRoutingConfig)
    ],
    exports:[RouterModule],

})
export class ShopRoutingModule{}

我的订单组件：

export class OrderComponent implements OnInit
{

    constructor(private route:ActivatedRoute) {
    }

    ngOnInit(): void {
        debugger
       const routeParams = this.route.snapshot.paramMap;
       var tokenText = routeParams.get('token')
       var userId = routeParams.get('PayerID')
    }
}

唯一可行的方法是，如果我手动编辑 url "localhost:4200/shop/order/8DC695025P9917207"

【问题讨论】：

Token 和 Payer 是查询参数，您不需要将它们添加到您的路由器配置中，只需将它们删除即可。你可以使用 this.route.queryParams 获取查询参数值

标签： javascript angular

【解决方案1】：

"localhost:4200/shop/order?token=8YS089366D9655&PayerID=ASDVD4BLMH" token 和 PayerId 是查询参数，但是你已经将你的路由描述为 order/:token/:payerId，也就是路由参数。所以如果重定向 URL 是 “本地主机：4200/shop/order/8YS089366D9655/ASDVD4BLMH”。

由于重定向 URL 使用 queryParams 返回，因此最好将您的路由设置为

path:'order/', component: yourComponent

在component.ts中

  constructor() {
  this.route.queryParams.subscribe(params => {
   this.tokenText = params.token:
   this.userId = params.payerId
  })
}

【讨论】：