Anglar 中的 queryParams 與 HttpParams

Question

我現在才發現，我們可以使用「queryParams」和 HttpParams 建構查詢字串參數 URL - 下面是範例

goProducts() {
  this.router.navigate(
    ['/products'],
    { queryParams: { 'pageNumber': {page}, 'price-range': {itemsPerPage} } }
  );
}

let params = new HttpParams();
params = params.append('pageNumber', page);
params = params.append('pageSize', itemsPerPage);

哪一種方法最好用？ 試圖找出差異，但我無法從網路上找出太多資訊。

嘗試找出差異。

Answer 1

這兩種方法 - 使用 queryParams 和 HttpParams - 都可以用來建構帶有查詢參數的 URL。但是，這兩種方法之間存在一些差異。

queryParams 方法與 Angular Router 模組一起使用來建構包含查詢參數的 URL。這是建構 URL 的便捷方法，可與 RouterLink 指令或 Router 模組的導覽方法一起使用。這種方法更適合 Angular 應用程式內的導航。

另一方面，HttpParams 方法用於建構可用於發出 HTTP 請求的 URL。它是 Angular HttpClient 模組的一部分。這種方法更適合向外部伺服器發出 HTTP 請求。

這兩種方法都有自己的優點和用例。如果您要在 Angular 應用程式中建立用於導航的 URL，則應使用 queryParams 方法。如果您要建立 URL 來向外部伺服器發出 HTTP 請求，則應使用 HttpParams 方法。

在您的特定範例中，如果您要導覽至 Angular 應用程式中的頁面，則應使用 queryParams 方法。如果您要向外部伺服器發出 HTTP 請求，則應使用 HttpParams 方法。