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

首先,我要说,我认为对“视图状态”的支持应该是框架的一部分.它可能很好,但我还没有找到它.但由于我现在需要一个解决方案,所以我决定推出自己的解决方案.这是它的工作原理.

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

@Injectable()
export class ViewStateservice  {
  viewState : Map<String,Map<String,String> > = new 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应用程序做了这个,它似乎工作得很满意.但是,我认为框架确实应该提供这种机制.如果它确实(或当我弄清楚它是如何工作的)我计划切换到使用它.但与此同时,我有一个有效的解决方案.