在Angular中處理大量可選參數的最佳方法

我有一個基於用戶選擇的過濾器選項顯示數據的Angular 4組件。我想將過濾器選項保存爲類似kibana的url類型中的參數。在Angular中處理大量可選參數的最佳方法

我想知道什麼是處理所有這些可選參數的最佳方法。我的例子中有6個過濾器選項，它使代碼有點笨拙。

目前我正在訂閱route.params並用if語句搜索每一個。要創建和導航網址，我要訂閱事件發佈器，檢查自定義params類的值。這裏就像

this.route.params.subscribe((params: Params) => { 
     if (params["filter1"]) this.params.filter1 = params["filter1"]; 
     if (params["filter2"]) this.params.filter2 = params["filter2"]; 
     if (params["filter3"]) this.params.filter3 = params["filter3"]; 
     if (params["filter4"]) this.params.filter4 = params["filter4"]; 
     if (params["filter5"]) this.params.filter5 = params["filter5"]; 
     if (params["filter6"]) this.params.filter6 = params["filter6"]; 
    }); 


    this.refreshParams.subscribe((params) => { 
     let url = {}; 

     if (params.filter1) url["filter1"] = params.filter1; 
     if (params.filter2) url["filter2"] = params.filter2; 
     if (params.filter1) url["filter3"] = params.filter3; 
     if (params.filter1) url["filter4"] = params.filter4; 
     if (params.filter1) url["filter5"] = params.filter5; 
     if (params.filter1) url["filter6"] = params.filter6; 
     this.router.navigate(['/filters', url]); 
    }); 

    selectFilter(filter1: Filter) { 
     if (filter1) { 
      this.params.filter1 = filter1; 
     } else { 
      this.params.filter1 = undefined; 
     } 
     this.refreshParams.next(this.params); 
    }

來源

2017-06-28 mrusername

我對這個問題採取將

this.route.params.subscribe((params: Params) => { 
    for (let param in params) { 
     this.params[param] = params[param]; 
    } 
});

的for...in經過所有的鑰匙，讓你既可以設置你的陣列中的關鍵，並得到它的外觀
的一個實例這些參數中的關鍵值。

來源

2017-06-28 14:24:18 trichetriche

您有幾種選擇：

1）你可以定義每個參數屬性的單個對象。那麼你的代碼只需要分配/檢索一個對象。

let filters = {filter1:5,filter2:"Joe"}; 
this._router.navigate(['/products', {filter: JSON.stringify(filters)}]);

我的硬編碼數據可以用用戶輸入的值替換。

2）您可以使用每個過濾器的屬性來定義服務。該服務是一個單例，因此一個組件可以設置屬性，另一個組件可以讀取屬性而不必通過路由參數。

來源

2017-06-28 14:26:05 DeborahK

在Angular中處理大量可選參數的最佳方法

回答

相關問題