ビューの状態をキャッシュに保存するか、履歴のビュー状態を角2に戻す方法

Question

material design grid-listで角度2を使用しています。infinite scrollingでアイテムを選択すると、urlパスのidを表す詳細ビューにナビゲートします。 。私がリストに戻った場合、ビューは再読み込みされ、初期状態は失われます。

戻ってナビゲートするときのビューの状態を維持する適切な方法は何ですか？ナビゲーションが行われる前にビューをキャッシュすることは可能ですか？

Answer 1

これは理論的には可能ですが、まだ試していません。

詳細ビューを子ルートまたはコンポーネントとして配置すると、リストビューコンポーネントは子ルート/コンポーネントのinitで破棄されません。次に、親コンポーネントを非表示にして子に移動できます。これは適切な解決策ではありませんが、リストビューの状態を保存する方法を見つける必要があります。

Answer 2

まず、「ビューステート」のサポートはフレームワークの一部でなければならないと思います。そしてそれは非常に良いかもしれませんが、私はまだそれを見つけることができませんでした。しかし、今私は解決策が必要なので、私は自分自身を転がすことに決めました。これはどのように動作するのですか？

次のようにViewStateServiceを作成しました。サービスのviewStateはマップのマップであることに注意してください。各トップレベルコンポーネントにナビゲートすることができ、コンポーネント名をキーとして最上位のマップエントリがあります。そのキーのマップは、保存されたビューステートとビューステートを保存する場所の両方を保持するために、サブコンポーネントに渡すために使用されます。

@Injectable() 
export class ViewStateService { 
    viewState : Map<string, Map<string, string> > = new Map<string, Map<string, string> >(); 
    constructor(){ 
    } 

    setViewState(key : string , map : Map<string, string>){ 
    this.viewState.set(key, map); 
    } 

    getViewState(key : string) : Map<string, string>{ 
    return this.viewState.get(key); 
    } 
} 

次に、このサービスが注入されます。トップレベルのコンポーネントは、その後の呼び出しによってngOnInitそのビュー状態を（）を抽出：

this.viewState = this.viewStateServices.getViewState("ComponentName"); 

このマップは、各サブコンポーネントへの入力として受け継がれている（または少なくともビューステートを保存する必要があるもの）。サブコンポーネントはすべてOnInitとOnDestroyを実装します。 ngOnInit（）では、保存されているビューの状態を取得します。また、ngOnDestroy（）では、必要なviewstateをすべて保存します。各サブコンポーネントは、サブステートへの入力としてビューステートを渡します（再帰的に）。このようにして、各サブコンポーネントはviewstateの保存と復元の機会を得ます。注意すべき点の1つは、同じ名前で値を保存しようとするコンポーネントです。すべてのフィールドの前にコンポーネント名やその他の規則を付けることで、これを緩和することができます。

私はAngularアプリでこれを行っていますが、満足のいく結果が出ているようです。しかし、私はフレームワークが本当にこのメカニズムを提供すべきだと思います。それが（そして私がそれがどのように動作するかを理解している場合）、それを使用するように切り替えるつもりです。しかし、その間に、私は解決策があります。