介紹
在建置應用程式時，可能會遇到需要傳入一些引數或參數來描述路由行為的情境。在 Angular 中，這些被稱為 查詢 參數，且它們是選填的。查詢參數不應與一般的 路由 參數混淆，後者是必填參數，且僅與單一路由綁定。
為了釐清路由參數與查詢參數之間的差異，請想像您正在建置一個儲存產品的應用程式。您可以擁有一個使用以下項目來開啟特定產品的路由： product_id。您也可以指定一個查詢參數： read_only。當 read_only 被設定為 true 時，使用者只能檢視該記錄；而當 read_only 為 false 時，使用者也可以編輯該記錄。如此一來，僅使用單一路由，就能同時處理編輯與檢視的使用案例。在這裡， product_id 是 路由參數，而選填的 read_only 則是 查詢 參數.
先決條件
若要完全理解本文，需要熟悉使用 Angular 建置應用程式。具備 Angular Router、RouterLink 和 ActivatedRoute 的使用經驗也會有所幫助。
使用 Router.navigate 傳遞查詢參數
如果您正在使用 Router.navigate 來在路由之間進行導覽，請使用 queryParams 來傳送查詢參數。
在上述範例中，如果我們希望訪客看到按熱門程度排序的產品列表，我們將使用以下程式碼：
|
1 2 3 4 5 6 |
navigateToProducts() { this.router.navigate( ['/products'], { queryParams: { order: 'popular' } } ); } |
使用此程式碼後，URL 將變為：
|
1 |
http://localhost:4200/products?order=popular |
然而，在某些情境下，我們在導覽時可能需要傳遞多個參數。例如，如果我們想按熱門程度以及價格來排序產品，我們可以使用以下程式碼：
|
1 2 3 4 5 6 |
navigateToProducts() { this.router.navigate( ['/products'], { queryParams: { order: 'popular', price: 'high-to-low' } } ); } |
這一次，URL 將變為以下內容：
|
1 |
http://localhost:4200/products?order=popular&price=high-to-low |
以上介紹了如何使用以下項目來設定查詢參數： queryParams.
使用 queryParamsHandling 防止查詢參數遺失
在路由之間進行導覽時，參數往往會遺失。假設我們傳入了一個引數 arg0，在後續進行路由時它將不會被傳遞。我們可以使用 queryParamsHandling 並將其值設定為 preserve 或 merge.
在上述範例中，假設我們想將訪客引導至 brands 頁面，從 product 頁面並帶有路由參數 { order: 'popular' }，同時保留路由參數。若要這樣做，我們可以使用 queryParamsHandling 並將其設定為 preserve :
|
1 2 3 4 5 6 |
navigateToBrand() { this.router.navigate( ['/brand'], { queryParamsHandling: 'preserve' } ); } |
這將使 URL 看起來像：
|
1 |
http://localhost:4200/users?brand=popular |
接下來，假設我們想保留上一個路由的查詢參數 { order: 'popular' } 同時新增參數 { price: 'high-to-low' }。我們可以將 queryParamsHandling 設定為 merge:
|
1 2 3 4 5 6 7 8 |
navigateToBrand() { this.router.navigate( ['/brand'], { queryParams: { price: 'high-to-low' }, queryParamsHandling: 'merge' } ); } |
使用上述程式碼，URL 將變為：
|
1 |
http://localhost:4200/brand?order=popular&price=high-to-low |
在此，我們總結了使用 queryParamsHandling 來保留或合併查詢參數。
使用 RouterLink 傳遞查詢參數
考慮到我們之前的連結，如果我們想使用 RouterLink 指令進行導覽，我們需要使用 queryParams 傳遞查詢參數，如下所示：
|
1 2 3 |
<a [routerLink]="['/products']" [queryParams]="{ order: 'popular' }"> 產品 </a> |
請注意我們是如何將物件傳遞給 queryParams （使用單向繫結）。我們也可以將整個物件作為 queryParams .
傳遞。此外，如果我們想在後續導覽中繼續攜帶這些查詢參數，我們可以使用 queryParamsHandling 選項。queryParamsHandling 的可能選項有 merge 以及 preserve:
|
1 2 |
<a [routerLink]="['/products']" [queryParams]="{ filter: 'new', order: 'popular' }" queryParamsHandling="merge">產品</a> |
在這裡，我們已經看到了如何傳遞 queryParams 以及如何使用 queryParamsHandling 在 RouterLink.
中處理參數
到目前為止，我們已經學習了如何在路由中傳遞查詢參數。這些參數是可選的，用於向目標頁面傳遞某些資訊。發送參數只是其中一部分，但從 URL 中讀取參數並使用它們也是必要的。
在 Angular 中，我們使用 ActivatedRoute 類別來讀取路由查詢參數。 ActivatedRoute 具有一個名為 queryParams 的 Observable 屬性，用以獲取目前 URL 的參數。
假設我們正在處理以下 URL：
|
1 |
http://localhost:4200/products?order=popular |
要在程式碼中存取查詢參數 order ，我們使用以下程式碼：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
import { ActivatedRoute } from '@angular/router'; import 'rxjs/add/operator/filter'; @Component({ ... }) export class SampleComponent implements OnInit { order: string; constructor(private route: ActivatedRoute) { } ngOnInit() { this.route.queryParams .filter(params => params.order) .subscribe(params => { console.log(params); // { order: "popular" } this.order = params.order; }); } } |
在主控台（console）中，我們將會看到 order 查詢參數的值為 “popular” 印出。如果我們有多個查詢參數，我們可以使用 queryParamMap 屬性，它會返回一個 observable paramsMap 物件。
如果我們有包含多個查詢參數的 URL，例如：
|
1 |
http://localhost:4200/products?order=popular&price=high-to-low |
我們可以使用以下程式碼來存取這些查詢參數：
|
1 2 3 4 5 |
this.route.queryParamMap .subscribe((params) => { this.queryObj = { ...params.keys, ...params }; } ); |
使用 物件展開運算子 ，我們得到以下結果：
|
1 2 3 4 5 6 7 8 |
{ "0": "order", "1": "filter", "params": { "order": "popular", "price": "high-to-low" } } |
最後，您應該能夠理解如何從產生的路由中存取查詢參數。
結論
在本教學中，我們探討了查詢參數與路由參數之間的差異。我們也研究了如何跨路由將引數作為查詢參數傳遞，並在頁面上使用 queryParams 以及 queryParamsHandling 搭配 Router.navigate 以及 RouterLink 重新檢索它們。我們也學習了如何處理 queryParams 以及 queryParamMap 搭配 ActivatedRoute.
Angular 的底層需要 JavaScript。如果您想進一步了解 JavaScript 的知識，可以參考以下部落格文章：
祝您編程愉快！
留言
目前尚無留言。成為第一個留言的人吧。