5

新しいAngular2アプリにフィルタリングメカニズムを実装しようとしています。これにより、配列内のエントリのリストをフィルタリングできます。エントリには、フィルタリングできる約 20 のプロパティが含まれる場合があります。ここまでは、1 つのコンポーネントでフィルターのリストを作成してから、ルーティング先のリスト コンポーネントを子として作成しました。次に、ルーターを介してフィルターを queryParams として渡すことを計画しました。たった1つのフィルターから始めて、これは問題ありませんでした：

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

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

受信側では、次のことがありました。

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

次に myFilter をフィルター パイプに渡して、一致とフィルター処理を行います。これまでのところすべて問題ありません。

ただし、これをスケールアップして複数の潜在的なパラメータを許可する方法がわかりません。そのほとんどは空白/不要です。

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

{queryParams: { pass an array here! }}

しかし、キーと値のペア以外のものを入力すると、IDE がエラーを登録します。

考えられるすべてのフィルターとその値を毎回追加することもできますが、それでは毎回非常に長い URL 文字列が作成され、ほとんどの値が空白またはすべてなど、あまりきれいではありません。

したがって、私のワークフローは、送信側ですべてのフィルターとその状態の配列を維持し、フィルター ボタンの 1 つがクリックされるたびに、最初に配列内の関連する値を更新してから、配列全体を渡す必要があると思います。 queryParams を介して。

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

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

どんなアイデアもありがたく受け取った (独学のアマチュアなので、おそらく明らかな何かを見逃している!)

ありがとう

トニー

4

2 に答える 2

4

次のように試すことができます。

クエリ パラメータで配列を定義します。

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

この配列を 1 つのクエリ パラメータに入れます。

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

次のようにクエリ パラメータを読み取ります。

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

次のように表示されます。

Chrome デベロッパー ツールのスクリーンショット

これで、このオブジェクトを解析できます。URL が少し見にくいと思いますが、機能するはずです。試してみてください、お役に立てば幸いです;）

于 2016-12-22T12:06:00.387 に答える