如果特定 stateParam 为空,如何重定向到 state为空、重定向、stateParam、state

2023-09-06 08:52:51 作者:忌口

我不确定我这样做是否正确,任何建议都将不胜感激.

I'm not sure if the way I am doing it is correct, any advice would be appreciated.

我有一个餐厅选择器,用户可以从中选择餐厅.然后所有其他子状态加载特定于所选餐厅的内容.但是我需要默认选择一个子状态,包括一家餐厅,这将根据用户最近的位置或 cookie 数据(如果他们之前选择了一个)进行选择.但是,我不确定如何在不知道餐厅 ID 的情况下默认重定向到子状态?

I have a Restaurant Selector, which the user can select a restaurant from. Then all other child states load up content specific to the restaurant selected. But I need to have a child state selected by default, including a restaurant, which will be either selected based on the users closest location or on cookie data if they have previously selected one. But, i'm not sure how I can redirect to a child state by default without knowing the restaurant id already?

下面是我的代码的一个混蛋版本来说明.

A bastardised version of my code below to illustrate.

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

An image below to illustrate what is happening on the front end: www.merrywidowswine.com/ss.jpg

推荐答案

我会创建一个事件,每次打开该特定状态时都会触发该事件.

I would create an event that is fired every time you open that specific state.

查看他们的文档: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(...)}
  }
});

我自己从来没有使用过这样的活动,所以你可能需要下定决心做一些体操,但我相信这是最干净、最容易理解和最可维护的解决方案.

I've never used an event as such myself so you might have to do some gymnastics with resolve, but I believe this is the cleanest, easiest to understand and most maintainable solution.

2 全局 onStateChangeStart 事件全局事件(尽管每次状态更改都会触发)

2 Global onStateChangeStart event A global event (although this would get fired for every state change)

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

3 在控制器中或者,如果您想像开始那样使用控制器.

3 In the controller Alternatively If you want to use the controller like you started doing.

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

就开发而言,这可能是最快的解决方案,但我相信使用事件更简洁,代码更易于理解.

This is probably the fastest solution in terms of development but I believe using events is cleaner and makes for more understandable code.

注意:我实际上并没有运行任何这段代码,所以它可能不起作用,它只是让你知道去哪里的伪代码.如果您遇到问题,请告诉我.

Note: I haven't actually run any of this code so it might not work, it's just pseudo-code to give you an idea of where to go. Let me know if you run into issues.

编辑:实际上我不确定是否将 stateParams 传递给控制器​​.您可能必须使用 resolve 来访问它们.

EDIT: Acutally I'm not sure if stateParams are passed on to the controller. You might have to use resolve to access them.

编辑:要在 onEnter 回调或控制器中访问 stateParams,我相信您必须这样使用 resolve:

EDIT: to access stateParams in onEnter callback or the controller, I believe you have to use resolve as such:

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

有关更多示例/更好的解释,请参阅有关解析的 ui-router 文档

see the ui-router doc on resolve for more examples/better explanation