0

所以，UI-router 解析在 Angular 1 中是一件很美的事情：

$stateProvider.state('myState', {
      resolve:{
          myVarFromResolve: function(){
              return 'test'; 
          }
      }
   })

  controller: function($scope, myVar){
      $scope.myVar= myVarFromResolve;
      if(true){console.log($scope.myVar}; //logs 'test'
  }

我如何对 Angular 1.5 做同样的事情。组件（下面的示例）？

export default function FooComponent() {
  let fooComponent = {
    restrict: 'E',
    templateUrl: 'foo.html',
    controller: controller,
    controllerAs: 'foo',
    bindToController: true,
  };

  return landingComponent;
}

而决心...

.state('fooState', {
  parent: 'someParent',
  url: '/fooUrl',
  template: '<foo></foo>',
  resolve:{
       myVarFromResolve: function(){
           return 'test'; 
       }
    }
})

我阅读了有关如何执行此操作的指南，但我并不真正理解它。似乎功能还没有完全到位，这是一个 hack。

4

1 回答 1

0

看起来答案是“是的，有点”......

一位工作的团队成员为我提供了解决此问题的方法angular-ui-router 0.2.18（用于npm list angular-ui-router --depth=0快速检查您的版本）。它在使用 ES6 类时确实有效。

解决方法是基于这样一个事实，即没有（简单/已知的）方法可以将变量传递到控制器中，就像在 Angular 1 中在 1.5 中引入组件架构之前那样。相反，我们创建一个服务方法来创建一个承诺（或返回一个 http 调用）。然后，您只需将承诺放入解决方案中。promise 方法将在控制器加载之前返回。因此，虽然您没有易于使用的 var，但您在服务中拥有所需的数据。

  resolve: {
    preloadSomeVariableIntoAService: function (MyExampleService) {
      return MyExampleService.presetSomeVariable();
    }
  //Note that 'preloadSomeVariableIntoAService' won't be used anywhere in our case
  }

服务可能是这样的：

export default class MyExampleService {

  constructor( $q ) {
    this.q =  $q;
    this.myVariableFromResolve = undefined;
  }

  presetStreamStatus(){

    var deferred = this.q.defer();

    return $http.get(someUrl).then(response) => {
          this.myVariableFromResolve = response.data;
          deferred.resolve(events);
        });

    return deferred;

  };

};

然后，您将能够myVariableFromResolve从该服务中获取。我不确定您是否必须使用 $q deferred，但这似乎是必要的，因为我不仅要返回调用，还要设置变量。没有把握。希望这可以帮助某人。

于 2016-10-17T21:23:38.797 回答