如何将带问号的查询参数从其他网站传递到 angular 6 spa

Question

我有 2 个 Web 应用程序A和B。Web 应用程序 B 是 Angular 6 的基础。

在 Web 应用程序A 中，它获得了一个链接，该链接使用查询字符串引用 B，例如http://B/receipt?referencenumber=11111&title=test&description=sdfsd。

在 Web 应用程序B 中，我定义了如下路由。

{ path: 'receipt/:referencenumber/:title/:description', component: ReceiptComponent},
{ path: '', component: HomeComponent, pathMatch: 'full'},
{ path: 'home', component: HomeComponent},
{ path: 'error', component: ErrorComponent },
{ path: '**', component: ErrorComponent, data: { error: 404 } }

问题：

如果 Web 应用程序A，使用链接http://B/receipt?referencenumber=11111&title=test&description=sdfsd，它将被重定向到 Web 应用程序 B 中的 404 错误页面。

有人在这里有想法吗？我尝试将 Web 应用程序中的路由修改为 { path: 'receipt/:referencenumber', component: ReceiptComponent}，并将 Web 应用程序 A 中的链接更改为http://B/receipt?referencenumber=11111，它仍然重定向到 404。

此外，我已经使用可选的查询参数尝试了下面的路由，但它仍然无法正常工作。(Ref:通过 Angular 中的路由路径发送数据) { path: 'receipt', component: ReceiptComponent}

更新

去掉错误页面后，发现url是自动编码的，变成http://B/receipt%3Freferencenumber%3D123123 也不知道为什么？

Answer 1

你混合了url和queryParams

{ path: 'receipt/:referencenumber/:title/:description', component: ReceiptComponent},

会匹配网址 https://yoursite.com/receipt/dynamicNumber/dynamicTitle/dynamicDescription

得到这个网址http://B/receipt?referencenumber=11111&title=test&description=sdfsd上ReceiptComponent，只是删除dynamic部分后receipt：

{ path: 'receipt', component: ReceiptComponent}

得到queryParams的组件使用this.route.queryParams通过subscriber或this.route.snapshot.queryParams通过direct属性名