如何在状态重新加载时刷新缓存中的数据 - angular 1.5 / ui-router

Question

我正在处理一项任务，我在仪表板上有一堆小部件。当用户在仪表板上更改客户时，$state 会重新加载，小部件的位置应保存到缓存中，但与小部件相关的数据应刷新。有两个相关组件，客户更改的标题组件和小部件所在的仪表板组件。我想在不触及标题组件的情况下完成此操作。

以前，我写了一个函数，用于在保存到缓存后从缓存中删除所有与数据相关的属性，但我认为这可能不是正确的方法并且过于复杂。实现这一目标的最佳方法是什么？

所以假设每个小部件看起来像这样：

 {
 widgetType: chart, 
 position: someCoordinatesThatStayTheSameOnStateChange,
 chart: containsDataThatNeedsToBeRefreshed,
 chartData: containsDataThatNeedsToBeRefreshed
}

这是我的路由文件中的 $resolve'd 函数，它在仪表板控制器中公开 $ctrl.widgets：

widgets($http, $q, CacheFactory, WidgetsService) {
      'ngInject';
      let mockWidgetData = WidgetsService.getAllWidgets();
      let widgetsCache = CacheFactory.get('widgets');
      if (!widgetsCache) {
        CacheFactory.createCache('widgets', {
          storageMode: 'localStorage',
        });
      }
      return mockWidgetData;
    },

我在仪表板控制器的缓存中保存数据的相关位置：

let widgetsCache = CacheFactory.get('widgets');
  let widgetsCacheItems = widgetsCache.get('widgets');

  gridsterConfig.resizable.stop = function(event, $element, widget) {
    widgetsCache.put("widgets", $ctrl.widgets);
   //clearDataFromCache()
  }
  gridsterConfig.draggable.stop = function(event, $element, widget) {
    widgetsCache.put("widgets", $ctrl.widgets);
    //clearDataFromCache()
  }
  $ctrl.toggleVisibility = function(widget) {
    widget.hidden = !widget.hidden;
    widgetsCache.put("widgets", $ctrl.widgets);
   //clearDataFromCache()
  }

我写的旧函数：

function clearDataFromCache() {
        let widgetObjectsInCache = widgetsCache.get('widgets');
        widgetObjectsInCache.forEach((widget) => {
          if (widget.chart) delete widget.chart;
          if (widget.chartConfig) delete widget.chartConfig;
        })
        console.log(widgetObjectsInCache, "THE CACHE AFTER REMOVING ANY DATA RELATED STUFF");
      }

Answer 1

您可以使用状态解析函数来重新获取您想要的数据。请查看https://medium.com/opinionated-angularjs/advanced-routing-and-resolves-a2fcbf874a1c?swoff=true#.bkudisx52