如何從angular2應用中的url獲取路由參數？

我有一個是建立這樣一個恆定的途徑：如何從angular2應用中的url獲取路由參數？

export const ROUTES: Routes = [ 
    { path: 'custom', component: MyCustomComponent } 
]

我想這樣，如果用戶進入，使其：

http://my-angular-app/#/custom/something?mode=CRAZY

那「MyCustomComponent」中，我可以看到訪問「模式=瘋狂」，並做一些事情。

如何從我的MyCustomComponent訪問變量「mode」？還是我必須定義一個新路線才能傳遞參數？

來源

2017-07-05 Rolando

這對我來說很有用，可以訪問組件中的查詢參數。

import { Component, OnInit } from '@angular/core'; 
import { ActivatedRoute } from '@angular/router'; 

@Component({ 
    selector: 'app-custom', 
    templateUrl: './custom.component.html', 
    styleUrls: ['./custom.component.css'] 
}) 
export class CustomComponent { 

    constructor(private activatedRoute: ActivatedRoute) { 
    let mode = activatedRoute.snapshot.queryParams['mode']; //< HERE 
    console.log(mode); 
    }  
}

您需要導入ActivatedRoute，並通過構造函數注入它。然後，您可以通過注入的服務訪問查詢字符串中的內容。

有了這樣的路由器鏈接：

<a [routerLink]="['/custom']" [queryParams]="{mode: 'CRAZY'}">Go There!</a>

從控制檯日誌輸出爲CRAZY。

希望這會有所幫助。

來源

2017-07-05 01:11:47

我想要的模式：瘋狂是「可收藏」在瀏覽器中。我假設queryParams將它作爲post傳入到路由中？ – Rolando

由於您在URL中使用了散列，因此您應該可以將這些散列加入書籤。服務器忽略散列後的任何內容。 'queryParams'傳遞關於URL的信息，所以這是一個GET，而不是POST。 –

正如在其他答案中所說的，你可以使用ActivatedRoute.snapshot.queryParam但如果你的queryParam改變它的值，而你是在同一條路線，你會遇到問題，如果你需要更新你從queryParam得到的值。由於您處於相同的路徑，角度不會重新創建組件，所以您不會從構造函數中獲取快照中的新值。如果您需要在同一路線中獲取更新後的值，則應該預訂que queryParam observable。

constructor(
    private route: ActivatedRoute 
) { 
    this.route.queryParams.subscribe((queryParams) => { 
    console.log(queryParams); // get the values of your queryParams 
    }); 
}

現在，您的queryParams上的每個新值都將在組件中更新。由於它是一個Angular Observable，你不會費心手動處理它的取消訂閱，Angular會爲你照顧它。

來源

2017-07-05 03:55:51 Giovane

如何從angular2應用中的url獲取路由參數？

回答

相關問題