Question

因此，UI-router解决方案在角度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'; 
       }
    }
})

我读了guide关于如何做到这一点，但我真的不明白。似乎功能不完全到位，这是一个黑客。

Answer 1

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

由angular-ui-router 0.2.18工作的团队成员解决了这个问题（使用npm list angular-ui-router --depth=0快速检查您的版本）。它在使用ES6类时确实有效。

解决方法的基础是没有（简单/已知）方法将变量传递给控制器，就像在1.5中引入组件体系结构之前的Angular 1中那样。相反，我们创建一个创建承诺（或返回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，但它似乎是必要的，因为我不是简单地返回调用而是设置变量。不确定。希望这有助于某人。

UI-Router解析是否适用于Angular 1.5组件？

1 个答案: