Angularの多くのオプションのパラメータを扱う最良の方法

Question

私はユーザーが選択するフィルタオプションに基づいてデータを表示するAngular 4コンポーネントを持っています。私はkibanaのようなURLの種類のパラメタとしてフィルタオプションを保存したいと思います。

これらのオプションのパラメータをすべて処理するにはどうすればよいでしょうか。私は私の例で6つのフィルタオプションよりもはるかに多くを持っており、そのコードを扱いにくいものにしています。

現在、私はroute.paramsを購読していて、if文でそれぞれを検索しています。カスタムエフェクトクラスの値をチェックして、イベントエミッタに登録しているURLを作成してナビゲートするには、ここでは、この上の私のテイクは、あなたが配列にあなたの鍵を設定し、取得することができ、両方のように

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

for...inは、すべてのキーを通過するだろう

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); 
    } 

Answer 1

どのように見えるかのexmapleですparamsのキー値あなたは、各パラメータのプロパティを持つ単一のオブジェクトを定義することができ

1）：

Answer 2

あなたはいくつかのオプションがあります。次に、あなたのコードは1つのオブジェクトを割り当てる/取り出すだけでよいでしょう。

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

私のハードコードされたデータは、ユーザーが入力した値で置き換えることができます。

2）各フィルタのプロパティを持つサービスを定義できます。このサービスはシングルトンなので、1つのコンポーネントがプロパティを設定し、別のコンポーネントがルートパラメータを経由することなくプロパティを読み取ることができます。