如何路由非SEF網址？ angular 2

我正在嘗試爲我的角度2應用程序創建一個新的路線...該網址是用戶授予我的應用程序權限後，來自spotify API的回調如何路由非SEF網址？ angular 2

這是一個回撥示例：

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'

來源

2017-06-21 Victor Hugo Arango A.

路由參數之間的角2個分化帶來（必填）和查詢參數（可選），在你的榜樣，code和state會是查詢參數，它們不需要在Route的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符號。在官方的文檔

希望它能幫助！其他人Glober：B

PD：我假設你使用的是最新的路由器版本，每個版本都會有很大的變化。

編輯：增加了另一種方式導航到查詢參數的路線。

來源

2017-06-21 20:57:09

謝謝... 問題是，Spotify回調URL發送查詢參數分隔與＆和？如何在回撥控制器中讀取它們？我試圖 this._route.params.subscribe（PARAMS => { 的console.log（+參數[ '代碼']）; 的console.log（+參數[ '狀態']）; }）; 但沒有工作......我想因爲代碼和狀態參數沒有在路由中定義 –

你的CallbackComponent是否需要使用'code'和'status'的值，或者你只需要導航用戶Spotify端點爲您提供的網址？'，因爲如果您需要來自該網址的值「？」和'＆'你只需要將它們從字符串中去除，然後將它們作爲查詢參數傳遞給CallbackComponent，則無法使用route.params訪問它們的原因Angular不會將它們識別爲查詢參數，爲了從URL中獲取參數值，可以使用[this]（https://www.sitepoint.com/get-url-parameters-with-javascript/） –

如何路由非SEF網址？ angular 2

回答

相關問題