web-dev-qa-db-ja.com

angular ui-router：解決中のtoStateの$ state情報を取得

Update：これは、1.0.0alpha0。リリースノート https://github.com/angular-ui/ui-router/releases/tag/1.0.0alpha および問題 https://github.com/angular -ui/ui-router/issues/1018 作成しました。

解決に取り組んでいるときに、アプリがangular ui-routerを使用してナビゲートしている状態の名前とその他の属性にアクセスしたいと思います。

理由：アプリがそのページに入ることを許可する前に、一部のユーザーデータ（アクセス権を含む）を非同期にロードする必要があります。

現在、これは不可能です。なぜなら、解決するポイントに$ stateを挿入するのは、移動先の状態ではなく、移動先の状態を指しているからです。

自分ができるということがわかっている：

  • $ StateScope（ '$ 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
                    });
            }
        }
    });
});
javascriptangularjsangular-uiangular-ui-router
46
Jonathan Grupp

Ui-Router 1.xの更新

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

Ui-Router 0.x

いつでも飾ることができます$statenextおよびtoParamsプロパティ付き：

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);
        }
    }
});
56
TaylorMac

だから私は自分でこれに対する答えを発見しました。コードが私のように動作している場合、$ stateParamsオブジェクトは適切に挿入されますが、$ stateは空の（または古い）状態オブジェクトです。

私のために働いたのは、resolve関数で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
        }
    }
})

最初のログは、期待したものを返します。 2番目のログは、「生の」（より適切な用語がないため）状態オブジェクトを返します。したがって、たとえば、州の名前を取得するには、this.self.name。

私はこれが好まれていないことを理解しています... $state（または別の標準化されたオブジェクト）は、解決時にこの情報を提供することができますが、これは最良の方法です。

お役に立てば幸いです...

31
Nathan Rutman

this.toString（）は状態名を提供します

1
Hari Haran