ブラウザに適用されたフィルタを前後に保持する角度2

Question

ユーザーを表示するすべてのデータがあります。ユーザーがフィルタを適用している場合、角2を使用してクライアント側でフィルタリングしています。

ユーザーがプロジェクトの詳細ページに移動してブラウザの戻るボタンをクリックすると、適用されたすべてのフィルタが消えてしまいますが、戻るボタンではすべての適用されたフィルタが保持されるように実装する必要があります。

アプローチ：ユーザーがフィルタを適用するたびに、我々はURLであることを追加し、リダイレクト - ：私は考えてい

ソリューション。

問題：すべてのURLでリダイレクトAPIが呼び出されます。

私はこの問題にアプローチするより良い方法はありますか？

Answer 1

URLにフィルタ条件を表示し（ブックマークできるようにする）には、ルータパラメータを使用して、更新されたパラメータを含むURLにリダイレクトします。 routerCanReuse() { return true; }, then the component is not even reloaded but justを使用すると、更新されたパラメータを取得できる場所にrouterOnReuse（）が呼び出されます。

URLにフィルタ条件を表示しない場合は、共有サービスを使用してパラメータを格納し、ナビゲーションを実行してもパラメータ値は破棄されません。ルーティングされたコンポーネントが破棄されたときに破棄されないように、サービスのプロバイダが十分に高い（たとえばAppComponent）ことを確認します。

Answer 2

ビューを構築する隠し状態（グローバルアプリケーション変数）に依存しないので、引数としてURLに物を格納するのは良いアプローチです。

しかし、私はルーティングコンポーネントをインターセプトするのではなく、構造化されたURLに対してAngularのサポートを使用し、onInitメソッドまたは利用可能なデータをフィルタリングします。

Answer 3

私は、ユーザーが保存機能を使用したときにフィルタを適用してリスティングページに戻す必要がありました。 私が使用したアプローチは、サービスとURLパラメータにフィルタを組み合わせることでした。

1. を商品リストから：

   の両方を使用する理由は、あなたは、3つの方法で、製品の詳細ページに入ることができる 、です。

2. URLから直接。
3. 他にも、あなたがリンクを与えている可能性があります。

したがって、いずれの場合も最後のページにリダイレクトしたくない場合があるので、this._location.back();を使用することはできません。 私は最後のURLをサービスに格納し、詳細コンポーネントでは格納されているURLがあるかどうかチェックしました。

ここで重要なことは、ユーザーが必ず保存をクリックするとは限りませんので、ngOnInit()に保存されたURLを確認してポップすることです。

コードをサービスに添付すると、かなり基本的です。

@Injectable() 
export class ReturnHistoryService { 

    private _returnURL: string; 

    saveReturnURL(returnURL: string) { 
    this._returnURL = returnURL; 
    } 

    popReturnURL() { 
     let returnURL = this._returnURL; 
     this._returnURL = null; 
     return returnURL; 
    } 

`

プロバイダはコンポーネントごとではないことを確認してください。