angular ui-router：在解析中獲取 toState 的 $state 信息

Question

更新：從1.0.0alpha0這應該可以在 angular-ui-router 中1.0.0alpha0 。 請參閱發行說明https://github.com/angular-ui/ui-router/releases/tag/1.0.0alpha0和問題https://github.com/angular-ui/ui-router/issues/1018 I創建。

我想訪問狀態的名稱和應用程序在處理解析時使用 angular ui-router 導航到的其他屬性。

原因：我想在允許應用程序進入該頁面之前異步加載一些用戶數據（包括他們的訪問權限）。

目前這是不可能的，因為將 $state 注入到 resolve 中指向您要導航的狀態，而不是您要導航到的狀態。

我知道我可以：

• 使用 $rootScope('$stateChangeStart') 在其他地方獲取 toState 並將其保存在我的設置服務中。 但是我覺得有點亂。
• 將狀態硬編碼到解析中，但我不想對所有頁面重復使用我的解析

我還在 ui-router github 上創建了一個問題（如果你有興趣，請 +1！）： https : //github.com/angular-ui/ui-router/issues/1018

到目前為止，這是我的代碼。 任何幫助表示贊賞！

.config(function($stateProvider) {

    $stateProvider.state('somePage', {
        // ..
        resolve: {
            userData: function($stateParams, $state, Settings) {
                return Settings.getUserData() // load user data asynchronously
                    .then(function (userData) {
                        console.log($stateParams);
                        console.log($state);
                        // Problem: $state still points to the state you're navigating away from
                    });
            }
        }
    });
});

Answer 1

Ui-Router 1.x 更新

$provide.decorator('$state', ($delegate, $transitions) => {
    $transitions.onStart({}, (trans) => {
      $delegate.toParams = trans.params()
      $delegate.next = trans.to().name
    })
    return $delegate
  })

用戶界面路由器 0.x

你總是可以用next和toParams屬性裝飾$state ：

angular.config(function($provide) {
  $provide.decorator('$state', function($delegate, $rootScope) {
    $rootScope.$on('$stateChangeStart', function(event, state, params) {
      $delegate.next = state;
      $delegate.toParams = params;
    });
    return $delegate;
  });
});

並使用：

.state('myState', {
    url: '/something/{id}',
    resolve: {
        oneThing: function($state) {
            console.log($state.toParams, $state.next);
        }
    }
});

Answer 2

所以我自己發現了這個問題的答案。 如果你的代碼表現得像我的一樣，$stateParams 對象被正確注入，但 $state 是一個空的（或舊的）狀態對象。

對我有用的是在解析函數中引用this ：

.state('myState', {
    url: '/something/{id}',
    templateUrl: '/myTemplate.html',
    controller: function() {},
    resolve: {
        oneThing: function($stateParams) {
            console.log($stateParams); // comes through fine
            var state = this;
            console.log(state); // will give you a "raw" state object
        }
    }
})

第一個日志將返回您期望的內容。 第二個日志將返回一個“原始”（因為沒有更好的術語）狀態對象。 因此，例如，要獲取州名，您可以訪問this.self.name 。

我意識到這不是首選……如果$state （或其他標准化對象）可以在解析時為我們提供這些信息會更好，但這是我能找到的最好的。

希望有幫助...

Answer 3

this.toString() 會給你州名

Answer 4

這已經被問到這里了。

看起來它們內置於1.0.0-rc.2 $state$ ，您可以將其注入解析函數並獲取此信息。

resolve: {
  oneThing: function($state$) {
    console.log($state$);
  }
}