Angular ui-router动态地将解析函数添加到所有状态

Question

我正在尝试向我的应用程序中的每个状态添加一个解析器函数，以便等待应用程序的“启动”过程完成。 我已经有以下代码：

angular.forEach($state.get(), function(state) {
  state.resolve = state.resolve || {};
  state.resolve.session = function() {
    return SessionResolver.handle(state);
  }
});

SessionResolver是一种服务，其中handle(state)函数返回一个在启动过程完成后解析的promise。

除非定义了没有现有resolve对象的状态，否则这样可以正常工作。 例如，以下状态将阻塞，直到SessionResolver.handle承诺解析：

$stateProvider.state('dashboard', {
  url: "/",
  templateUrl: "dashboard.html",
  controller: "DashboardCtrl",
  resolve: {}
});

但是如果未设置resolve对象，则状态不会阻塞：

$stateProvider.state('dashboard', {
  url: "/",
  templateUrl: "dashboard.html",
  controller: "DashboardCtrl",
});

我宁愿不向我的每个状态添加一个空的resolve对象，因为我也可以在它处理时将SessionResolver.handle解析函数添加到它们中。

除非解析对象已经存在，否则任何想法为什么动态地将解析函数添加到状

Answer 1

我用这种方式解决了这个问题：

angular.module('sample', ['ui.router']).config(function($stateProvider) {
   var $delegate = $stateProvider.state;

   $stateProvider.state = function(name, definition) {
      definition.resolve = angular.extend({}, definition.resolve, {
         myCustomResolve: function() { return true; }
      });

      return $delegate.apply(this, arguments);
   };
   $stateProvider.state('example', { url: 'example/' });

}).run(function($state) { console.log('have resolve?', $state.get('example')); });

Answer 2

我可能不完全理解你的上下文问题，但看起来你正在寻找的是一个抽象的状态。 您可以为应用程序声明所有其他状态将成为子项的基本抽象状态，并将解析添加到该抽象状态。 这样，所有状态都将“阻塞”，直到父解析块完成。

$stateProvider.state('parent', {
  abstract: true,
  template: '',
  resolve: {
    session: function() {
      return SessionResolver.handle(state);
    }
  }
}).state('parent.child1', {
  url: '/',
  template: 'dashboard.html',
  controller: 'DashboardController'
});

您可以在https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views#abstract-states找到有关抽象状态的更多文档。