首页 文章

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

提问于
浏览 次
0

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

这是回调的一个例子：

HTTP：//本地主机：8080 /回调代码= AQBIIG2Klo0RzZf94a2Ag_gcn_JIrwv2d8N2ABVyCMwxmf1rmLFzq9HsUR08v8MY4ZiQ0Gl6-hWLGqiwtYGADt0TdbKYaD_Z9VKJMFvE97TVs0IsfYfs7ALZpsuVHaa-urSzzFmvZu4PdtyFp7WeMqtrDVDHie6k6NoeuG0LUfUxwmtG7TCfhUZvxY0c0V9bAVEGHiO1Izo_4WgOfNs78IYj1ZvclM-7J-zHAGgLEvwtjyX25vxKng＆状态= Q8L4joXNk3M8UVQt

我试过这个：

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

还有这个：

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

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

未捕获（承诺）：错误：无法匹配任何路线 . URL段：'回调'错误：无法匹配任何路由 . 网址细分：'回调'

angular angular2-routing

1 回答

  • 1

    Angular 2区分路由参数（必需）和查询参数（可选），在您的示例中， code 和 state 将是查询参数，它们不应该是't need to be explicitly defined in the Route' s path 属性，而是作为查询参数传递 .

    所以你会有一个像这样定义的Route：

    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：我假设您正在使用最新的路由器版本，每个版本都会发生很大变化 .

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

    回复于

相关问题