☰

特定の stateParam が空の場合に状態にリダイレクトする方法 質問する

tag-icon • tag-icon angularjs angular-ui-router
特定の stateParam が空の場合に状態にリダイレクトする方法 質問する

私がやっているやり方が正しいかどうかわかりません。アドバイスをいただければ幸いです。

ユーザーがレストランを選択できるレストラン セレクターがあります。その後、他のすべての子状態では、選択されたレストランに固有のコンテンツが読み込まれます。ただし、レストランを含む子状態がデフォルトで選択される必要があります。これは、ユーザーの最も近い場所に基づいて選択されるか、以前に選択したことがある場合は Cookie データに基づいて選択されます。ただし、レストラン ID をすでに知らなくても、デフォルトで子状態にリダイレクトする方法がわかりません。

説明のために、私のコードの改変版を下記に示します。

app.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/restaurant/[some id based on cookie info]/our-food"); // if no id is set, then I want to get it from a cookie, but then how do i do the redirect?

$stateProvider
    .state('restaurant', {
        url: '/restaurant/:restaurantId',
        template: "<ui-view/>",
        controller: function($state, $stateParams, Data, RestaurantService, $cookieStore) {
            if(typeof $stateParams.restaurantId !== 'undefined') {
                                  // get the restaurantID from the cookie
                            }
        }
    })
    .state('restaurant.our-food', {
        url: '/our-food',
        templateUrl: function($stateParams) {
        return 'templates/food-food.html?restaurantId=' + $stateParams.restaurantId;
        },
    controller: 'SubNavCtrl'
    })
    .state('restaurant.glutenfree-vegetarian', {
        url: '/glutenfree-vegetarian',
        templateUrl: function($stateParams) {
    return 'templates/food-vegetarian.html?restaurantId=' + $stateParams.restaurantId;
        },
    controller: 'SubNavCtrl'
    })

フロントエンドで何が起こっているかを示す画像を以下に示します: www.merrywidowswine.com/ss.jpg

ベストアンサー1

特定の状態を開くたびに発生するイベントを作成します。

彼らのドキュメントをチェックしてください:https://github.com/angular-ui/ui-router/wiki#onenter-and-onexit-callbacks

私の推測では、こんな感じです

1. レストラン状態への onEnter コールバック (推奨)

$stateProvider.state("contacts", {
  template: '<ui-view>',
  resolve: ...,
  controller: function($scope, title){
  },
  onEnter: function(){
    if(paramNotSet){ $state.go(...)}
  }
});

私自身はイベントをそのような形で使用したことがないので、解決方法を少し工夫する必要があるかもしれませんが、これが最もクリーンで、理解しやすく、保守しやすいソリューションだと信じています。

2 グローバル onStateChangeStart イベントグローバル イベント (ただし、これは状態が変化するたびに発生します)

$rootScope.$on('$stateChangeStart', 
function(event, toState, toParams, fromState, fromParams){ ... //check cookie, change state etc ...})

3 コントローラーであるいは、最初と同じようにコントローラーを使用する場合。

controller: ['$state', '$stateParams', 'Data', 'RestaurantService', '$cookieStore', 
function($state, $stateParams, Data, RestaurantService, $cookieStore) {
    if(typeof $stateParams.restaurantId !== 'undefined') {
        sate.go('restaurant', $cookieStore['restaurant'])
    }
}]

これはおそらく開発の観点から最も速いソリューションですが、イベントを使用する方がよりクリーンで理解しやすいコードになると思います。

注記：実際にこのコードを実行したことがないので、動作しない可能性があります。これは、どこに進むべきかについてのアイディアを提供するための疑似コードにすぎません。問題が発生した場合はお知らせください。

編集: 実際には、stateParams がコントローラーに渡されるかどうかはわかりません。それらにアクセスするには、resolve を使用する必要があるかもしれません。

編集: onEnter コールバックまたはコントローラーで stateParams にアクセスするには、次のように解決を使用する必要があると思います。

    resolve: {
         checkParam: ['$state','$stateParams', '$cookieStore', function($state, $stateParams, $cookieStore) {
//logic in here, what it returns can be accessed in callback or controller.
         }]

より多くの例やより詳しい説明については、Resolve の ui-router ドキュメントを参照してください。

おすすめ記事