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

但我无法获得路由工作...... 我总是得到这样的信息：

未捕获（承诺）：错误：无法匹配任何路线。网址细分： '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

希望它有所帮助！同事格柏：B

PD：我假设您正在使用最新的路由器版本，每个版本都会发生很大的变化。

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

如何路由不是SEF网址？角2

1 个答案: