UI-Router Resolve 是否适用于 Angular 1.5 组件？答案

【问题标题】：Does UI-Router Resolve Work with Angular 1.5 Components?UI-Router Resolve 是否适用于 Angular 1.5 组件？
【发布时间】：2017-02-25 22:07:59
【问题描述】：

所以，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'; 
       }
    }
})

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

【问题讨论】：

参考这个问题：stackoverflow.com/questions/39668477/… 他们有一个使用 ui-router@1.0.0 的工作示例。您是否有任何机会使用 ui router 0.3.x 如果是这样，它不会按照上面的链接。另外，我完全不确定这是否可以与 ES6 一起使用。在任何情况下， angular.module('app').component() 语法都有效。
谢谢你的回答，我会搞砸的。

标签： angularjs angular-ui-router angular-components

【解决方案1】：

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

为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，但这似乎是必要的，因为我不仅要返回调用，还要设置变量。不确定。希望这可以帮助某人。

【讨论】：