当我仅使用ui-router查看父状态时,如何自动转到上次选择的子状态?

时间:2021-09-09 11:54:55

I have the following set up:

我有以下设置:

   var admin = {
        name: 'admin',
        url: '/admin',
        views: {
            'menu': {
                templateUrl: '/Content/app/admin/partials/menu.html',
            },
            'content': {
                templateUrl: function (stateParams) {
                    var content = localStorage.getItem('ls.adminPage');
                    if (content != null && content != "") {
                        return '/Content/app/admin/partials/' + content + '.html';
                    }  else {
                        return '/Content/app/common/partials/empty.html';
                    }
                }
            }
        }
    };

    var adminContent = {
        name: 'admin.content',
        parent: 'admin',
        url: '/:content',
        views: {
            'content@': {
                templateUrl: function (stateParams) {
                    localStorage.setItem('ls.adminPage', stateParams.content);
                    return '/Content/app/admin/partials/' + stateParams.content + '.html';
                },
            }
        }
    }

What happens is that when a user has previously been to the /admin/xxx page then the next time /admin is selected it will again return the /admin/xxx page.

当用户之前已经访问/ admin / xxx页面然后下次/ admin被选中时,它将再次返回/ admin / xxx页面。

However visually this is a mess as the browser URL shows as /admin and the state is not set correctly.

但是在视觉上这是一团糟,因为浏览器URL显示为/ admin并且状态未正确设置。

Is there some way I can store away a child state and then have it so that when the user browses to the parent that it will transition to the last known child state and have that URL show in the browswer ?

有没有什么方法可以存储一个子状态然后拥有它,以便当用户浏览父级时它将转换到最后一个已知的子状态并在浏览器中显示该URL?

1 个解决方案

#1


4  

Do this:

做这个:

myapp.config(function($urlRouterProvider){

  $urlRouterProvider.when('/admin', function() {
    var content = localStorage.getItem('ls.adminpage');
    if ( content != null && content != "" ) {
      return "/admin/" + content;
    }
    else {
      return false;
    }
  });

});

See this plunkr: http://plnkr.co/edit/oEXZpO

看到这个plunkr:http://plnkr.co/edit/oEXZpO

Edit: Revisiting this answer after two months I realize that it is a little short (to say the least) on explanation: So this will actually "redirect" the request to the last selected admin page so that it will show up in the URL. I have updated the Plunkr and added a function to show the current document URL. So one can see that after clicking on /admin/ the URL will actually be /admin/12345 if this was the admin sub page visited before.

编辑:两个月后重新审视这个答案我意识到它有点简短(至少可以说)解释:所以这实际上会将请求“重定向”到最后选择的管理页面,以便它显示在URL中。我更新了Plunkr并添加了一个显示当前文档URL的函数。所以可以看到,点击/ admin /后,如果这是之前访问过的admin子页面,则URL实际上是/ admin / 12345。

#1


4  

Do this:

做这个:

myapp.config(function($urlRouterProvider){

  $urlRouterProvider.when('/admin', function() {
    var content = localStorage.getItem('ls.adminpage');
    if ( content != null && content != "" ) {
      return "/admin/" + content;
    }
    else {
      return false;
    }
  });

});

See this plunkr: http://plnkr.co/edit/oEXZpO

看到这个plunkr:http://plnkr.co/edit/oEXZpO

Edit: Revisiting this answer after two months I realize that it is a little short (to say the least) on explanation: So this will actually "redirect" the request to the last selected admin page so that it will show up in the URL. I have updated the Plunkr and added a function to show the current document URL. So one can see that after clicking on /admin/ the URL will actually be /admin/12345 if this was the admin sub page visited before.

编辑:两个月后重新审视这个答案我意识到它有点简短(至少可以说)解释:所以这实际上会将请求“重定向”到最后选择的管理页面,以便它显示在URL中。我更新了Plunkr并添加了一个显示当前文档URL的函数。所以可以看到,点击/ admin /后,如果这是之前访问过的admin子页面,则URL实际上是/ admin / 12345。