Angular2で複数のqueryParamsを処理する方法

Question

新しいAngular2アプリケーションでフィルタリングメカニズムを実装しようとしています。これにより、配列内のエントリのリストをフィルタリングすることができます。エントリには、約20個のプロパティをフィルタリングすることができます。私はこれまで、1つのコンポーネントにフィルタのリストを作成してから、子としてルーティングされるリストコンポーネントを作成しました。 私は、ルータを通してqueryParamsとしてフィルタを渡すことを計画しました。これは大丈夫だったただ一つのフィルタを皮切り：

私が持っていた送信側では：

this.router.navigate(['/findlist'], {queryParams: {'g': myParam}}); 

は、受信側で、私が持っていた：

this.subscription = this.route.queryParams.subscribe(
    (queryParam: any) => this.myFilter = queryParam['g'] 
); 

私はその後、フィルターにmyFilterをを渡しますマッチしてフィルターをかけるパイプ。これまでのところOKです。

しかし、私はこれをスケールアップして複数の潜在的なParamsを可能にする方法を理解することはできません。そのほとんどは空白/不要です。

私はqueryParamを通じてすべてのアクティブなフィルタを保持する配列を定義する必要があると思いますが、私が見つけることができる唯一のドキュメントは、1つのパラメータが渡された例を示しています。私は周りを試してみました：

{queryParams: { pass an array here! }} 

しかし、私はキー以外のものを置くとエラーになります：値のペア。

たぶん、すべての可能なフィルタとそれらの値を追加することができますが、毎回愚かに長いURL文字列を作成します。

私は、送信側ですべてのフィルタとその状態の配列を維持し、次にフィルタボタンの1つをクリックするたびに、配列の関連する値を更新してからqueryParamsで配列全体を渡します。

受信側では、何とかParamを配列として処理してから、各エントリを変数として抽出してフィルタで処理する必要があります。私はまたDRYになりたいので、受信側で複数のステートメントを効果的に実行したいのであれば、異なるプロパティに対して同じことを効果的に行いたいと思うのではなく、単純に配列を循環させる方が理にかなっています。

データを別の方法で渡すことを意味していても、誰でも提案があれば感謝したいと思います。たとえば、私は現在、別のフィルタサービスを作成し、代わりに@Inputを使ってデータを渡すだけでデータを渡すことができるかどうかを検討しています。

喜んで受け取ったアイデア （自己教えアマチュアのでおそらく何かが分かりません！）

おかげ

トニー

Answer 1

あなたはこのようにそれを試みることができる：

はあなたのクエリのparamsを持つ配列を定義します。

myQueryParams = [ 
    { id: 1, param: 'myParam' }, 
    { id: 2, param: 'myParam' }, 
    { id: 3, param: 'myParam' }, 
    { id: 4, param: 'myParam' }, 
    { id: 5, param: 'myParam' }, 
]; 

は、1つのクエリのparamに、この配列を置きます：

this.router.navigate(['/findlist'], { 
    queryParams: { 
     filter: JSON.stringify(this.myQueryParams) 
    } 
}); 

このようなクエリのparam読む：今、あなたはこのオブジェクトを解析することができます

：あなたはこのようなものが表示されます

this.route.queryParams.subscribe((p: any) => { 
    if (p.filter){ 
     console.log(JSON.parse(p.filter)); 
    } 
}); 

を。私は、URLが少し醜いと思うが、それは機能する必要があります。それを試してみてください;）