Question

我对这个Angular组件通信很新。我正在使用Angular 1.5.X版本，我正在使用工厂在组件之间共享数据。我面临一个问题，其中服务变量的异步值在一定时间后刷新。

我理解一个解决方案是在非范围变量上设置观察者，但我想我在这里缺少一些重要的东西。你们能分享一下观点吗？

这是Service.js代码

Service.$inject = ['$http','$q'];

function Service($http,$q) {

  this.$http = $http;
  this.$q = $q;

};

Service.prototype.getTileCount = 0;

Service.prototype.getTileData = function(Url){

    var deferred = this.$q.defer();

    this.$http.get(Url)
        .success(function(response){
            Service.prototype.getTileCount = response.data.length;
            console.log('data length :', Service.prototype.getTileCount);
        deferred.resolve(response);
    });

    return deferred.promise;
};

这是组件1控制器代码

function Component1Controller(Service) {

    this.tileData ={};
    var self = this;

    var promise = Service.getTileData(this.sourceUrl);

      promise.then(function(data) {

        self.tileData = data;
        Service.getTileCount = data.length;
        console.log('This is tileData : '+ Service.getTileCount);
      });

    };

这是组件2控制器代码

function Component2Controller(Service) {

  var self = this;

  console.log(Service.getTileCount);
// getting getTileCount = 0; After setting timeout function of 5 second I am able to get getTileCount value

};

Answer 1

问题是Service.getTileCount是异步更新的，这就是为什么它首先0然后在某个时刻发生变化的原因。我建议您简化服务，并始终使用getTileData方法，这将是一个单一的数据源。实施也会变得更简单：

function Service($http, $q) {
  this._tileData = null;
  this.$http = $http;
  this.$q = $q;
}

Service.prototype.getTileData = function(Url) {

  if (!this._tileData) {
    this._tileData = this.$http.get(Url).then(function(response) {
      return response.data;
    }.bind(this));
  }

  return this._tileData;
};

注意，它如何在＆＃34; private＆＃34;中缓存切片响应？ _tileData财产。现在，无论何时调用它，您都可以依赖getTileData方法返回数据：

function Component1Controller(Service) {

  this.tileData = {};
  var self = this;

  Service.getTileData(this.sourceUrl).then(function(data) {
    self.tileData = data;
    console.log('This is tileData:', self.tileData.length);
  });
};

function Component2Controller(Service) {
  var self = this;
  Service.getTileData(this.sourceUrl).then(function(data) {
    console.log('tile count', data.length);
  });
};

在这种情况下，不再需要Service.getTileCount。

演示： http://plnkr.co/edit/3zE6VL4emXaLRx2nCRih?p=info

Angularjs 1.5 - 使用服务的组件通信 - 异步变量操作？

1 个答案: