Question

我正在使用material design grid-list和infinite scrolling的角度2，当我从列表中选择一个项目时，我会导航到表示url路径中的：id的详细信息视图。如果我向后导航，则重新加载列表视图并且初始状态将丢失。

导航回来时保持视图状态的正确方法是什么？是否可以在导航发生之前缓存视图？

Answer 1

首先，我要说我认为支持＆＃34; view-state＆＃34;应该是框架的一部分。它可能很好，但我还没能找到它。但由于我现在需要一个解决方案，所以我决定推出自己的解决方案。这是它的工作原理。

我创建了一个ViewStateService，如下所示。请注意，该服务的viewState是Map的地图。可以导航到的每个顶级组件都有一个顶级映射条目，组件名称作为键。该键的映射用于向下传递给子组件，以保存其保存的视图状态以及存储其视图状态的位置。

@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");

此映射作为每个子组件（或至少需要保存viewState的子组件）的输入传递。子组件都实现了OnInit和OnDestroy。在ngOnInit（）中，他们检索保存的视图状态 - 如果它在那里。在ngOnDestroy（）中，他们保存了他们想要的所有视图状态。每个子组件还将视图状态作为子子组件的输入传递（递归）。通过这种方式，每个子组件都有机会保存和恢复视图状态。需要注意的一件事是尝试使用相同名称保存值的组件。您可以通过在所有字段前添加组件名称或其他一些此类约定来缓解此问题。

我已经为我的Angular应用做了这个，它似乎工作得很满意。但是，我认为框架确实应该提供这种机制。如果它确实（或当我弄清楚它是如何工作的）我计划切换到使用它。但与此同时，我有一个有效的解决方案。

Answer 2

这在理论上是可行的，但我还没有尝试过。

如果将详细信息视图作为子路由或组件，则不会在子路由/组件init上销毁列表视图组件。然后，您可以隐藏父组件并导航到子组件。虽然这不是一个合适的解决方案，但您必须找到一种方法来保存列表视图的状态。

如何在Angular 2中缓存历史记录中的视图或维护视图状态

2 个答案: