如何路由不是SEF url？ angular 2

Question

我正在尝试为我的 angular 2 应用程序创建一个新路由... url 是用户授予我的应用程序权限后来自 spotify API 的回调

这是回调的一个例子：

http://localhost:8080/callback?code=AQBIIG2Klo0RzZf94a2Ag_gcn_JIrwv2d8N2ABVyCMwxmf1rmLFzq9HsUR08v8MY4ZiQ0Gl6-hWLGqiwtYGADt0TdbKYaD_Z9VKJMFvE97TVs0IsfYfs7ALZpsuVHaa-urSzzFmvZu4PdtyFp7WeMqtrDVDHie6k6NoeuG0LUfUxwmtG7TCfhUZvxY0c0V9bAVEGHiO1Izo_4WgOfNs78IYj1ZvclM-7j-zHAGgLEvwtjyX25vxKng&state=Q8L4joXNk3M8UVQt

我试过这个：

const routes: Routes = [
  { path: 'callback/code/:code/state/:state', component: CallbackComponent }
];

还有这个：

const routes: Routes = [
  { path: 'callback?code=:code&state=:state', component: CallbackComponent }
];

但我无法获得路由... 我总是收到这条消息：

Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'callback' Error: Cannot match any routes. URL Segment: 'callback'

Answer 1

Angular 2 区分路由参数（必需）和查询参数（可选），在您的示例中，code 和 state 将是查询参数，它们不需要在路由的 path 属性中明确定义，但作为查询参数传递。

所以你会有一个这样定义的路由：

const routes: Routes = [
  { path: 'callback', component: CallbackComponent }
];

您可以在这样的模板中调用它：

<a [routerLink]="['/callback', { code: 'SOME_CODE', state: 'SOME_STATE' }]">Component Link</a>

或像这样以编程方式：

this.router.navigate(['/callback', { code: 'SOME_CODE', state: 'SOME_STATE' }]);

您还应该知道 Angular 不使用 ? 或 & 来分隔查询参数，而是使用 ;，称为矩阵 URL表示法。

官方文档中的更多信息：https://angular.io/guide/router#route-parameters-required-or-optional

希望对您有所帮助！同胞 Glober :B

PD：我假设您使用的是最新的路由器版本，每个版本都有很大变化。

编辑：添加了另一种导航到带有查询参数的路由的方法。

如何路由不是SEF url？ angular 2

How to route a not SEF url? angular 2

angular2-routing

angular