Angularjs 1.5.x 在组件之间与服务共享数据

Posted 2023-02-23

【中文标题】Angularjs 1.5.x 在组件之间与服务共享数据

【英文标题】：Angularjs 1.5.x share data with service between components

【发布时间】：2017-02-21 23:50:48

【问题描述】：

我是 angularjs 的新手，想问几个问题。 我正在做一个需要从服务器获取表单对象的项目。表单是一个具有许多层的复杂树对象，我创建了 4 个不同的组件/选项卡来绑定到相应的对象。我创建了一个服务来获取数据。

angular.module('myService', ['restangular'])
        .factory('FormService', ['Restangular', '$q', function(Restangular, $q)  

    function FormService() 
        var self = this;
        self.form = null;

        self.getForm = function getForm(id)
        
            var deferred = $q.defer();
            if (self.form !== null)
            
                deferred.resolve(self.form);
                console.log("Cache!");
            
            else 
                Restangular.one('form', id).get()
                  .then(function successCallback(response)
                  
                    self.form = response;
                    deferred.resolve(response);
                    console.log("from server!");

                  , function errorCallback(response) 
                    deferred.reject(response);
                    console.log("error, cannot resolve object");
                  );
            
            return deferred.promise;
        

      return new FormService();
  ])
);

然后我的组件都具有以下类似的配置：

angular.module('page1Summary', ['formService']).component('page1Summary', 
  templateUrl: 'page1-summary/page1-summary.template.html',
  controller: ['FormService', function Page1SummaryController(FormService) 
    var ctrl = this;

    // ******* Init Params Start *********** //
    this.$onInit = function() 
      // init value when object ready
      FormService.getForm()
        .then(
          /* on success */
          function successCallback(data) 
            console.log("page1-summary init");
            ctrl.form = data;
            console.log("page1-summary got the data");
        ,
          /* on error */
          function errorCallback(data)
          
              console.log("failed to get form");
          
      );
    

    /* other stuff here */
 

我正在打印“缓存！”或 getForm 服务上的“来自服务器”。这样我就可以弄清楚我是从服务器还是内存中提取数据。但是，每次刷新，结果都不一样。有时，数据保存在服务中的局部变量中，并被“缓存”，但有时，我的某些页面会“从服务器”获取数据。

我想知道出了什么问题？我以为只有第一次服务会从服务器获取，但似乎不是这样。

有人可以帮我指出我做错了什么吗？

提前致谢！

【参考方案1】：

您正在将结果缓存到self.form。 self.form 又是一个变量 FormSerivce 工厂成员。 它将缓存结果，直到您不刷新页面。 刷新页面后，self.form 中的值将被重置，就像应用程序中的所有其他变量一样。

您想要的不是将结果缓存在self.form 中，而是将其缓存在localstorage 中。 因此，即使在页面刷新后您也可以返回结果。