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

我将angular 2与with一起使用，当我从列表中选择一个项目时，我将导航到表示url路径中的：id的详细视图。如果我向后导航，列表视图将重新加载，初始状态将丢失

---

返回时，维护视图状态的正确方法是什么？是否可以按导航前的状态缓存视图？

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

---

如果将详图视图作为子管线或组件放置，则列表视图组件不会在子管线/组件初始化时销毁。然后可以隐藏父组件并导航到子组件。尽管这不是一个合适的解决方案，您必须找到一种保存列表视图状态的方法。

首先，让我说一下，我认为对视图状态的支持应该是框架的一部分。很可能是，但我还没找到。但既然我现在需要一个解决方案，我决定自己动手。下面是它的工作原理

我创建了一个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);
  }
}

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

---

我已经为我的Angular应用程序完成了这项工作，它似乎工作得令人满意。然而，我认为框架确实应该提供这种机制。如果它真的存在，或者当我弄明白它是如何工作的，我计划切换到使用它。但与此同时，我有一个可行的解决方案

有计划最终会支持这一点，但当前组件总是会重新创建，除非同一路由中只有一个参数发生了更改。您是否找到有关这方面的更多信息？我即将开始在我的Angular应用程序中设计ViewStateService。我认为这是可能的，但所有顶级可导航组件都将创建视图状态，并且该视图状态必须作为输入传递给所有子组件，以便它们可以添加到视图状态。我认为这将是混乱的，但我没有看到任何其他选择。不幸的是，没有。目前我只是缓存一个历史回溯级别的项目，并记住滚动位置。如果列表视图隐藏在内存中会更好。返回时有点麻烦，重新加载所有滚动的项目并滚动到新位置需要一些时间。谢谢。当/如果我找到解决方法，我将发布此方法令人印象深刻。我能进一步了解一下您是如何实际实施的吗？例如，如何将组件传递到viewStateService？上面已经解释过了。顶部可导航组件具有视图状态成员。此成员作为输入传递给每个子组件。子组件必须依次传递给子组件等，这是混乱的部分。但它确实有效。

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