使用 UI-Router 在用户转换到父状态时将用户引导到子状态 [英] Directing the user to a child state when they are transitioning to its parent state using UI-Router

问题描述

考虑以下事项:

.state('manager.staffList', {url:'^/staff?alpha', templateUrl: 'views/staff.list.html', data:{activeMenu: 'staff'}, controller: 'staffListCtrl'})
.state('manager.staffDetail', {url:'^/staff/{id}' , templateUrl: 'views/staff.html', data:{activeMenu: 'staff'}, controller: 'staffDetailsCtrl'})
  .state('manager.staffDetail.view', {url:'/view',  templateUrl: 'views/staff.details.html', data:{activeMenu: 'staff'}})
    .state('manager.staffDetail.view.schedule', {url:'/schedule', templateUrl:'views/staff.view.schedule.html', data:{activeMenu: 'staff'}})
    .state('manager.staffDetail.view.history', {url:'/history' , templateUrl:'views/staff.view.history.html', data:{activeMenu: 'staff'}})
    .state('manager.staffDetail.view.log', {url:'/log', templateUrl:'views/staff.view.log.html', data:{activeMenu: 'staff'}})
    .state('manager.staffDetail.view.files', {url:'/files', templateUrl:'views/staff.view.files.html', data:{activeMenu: 'staff'}})
  .state('manager.staffDetail.edit', {url:'/edit',  templateUrl: 'views/staff.edit.html', data:{activeMenu: 'staff'}})

如果我转到 domain.com/staff/1234/view，我如何默认为 manager.staffDetail.view.schedule 子状态?

If I go to domain.com/staff/1234/view, how do I default to the manager.staffDetail.view.schedule child state?

推荐答案

1. 首先，向 abstract:true 的 'manager.staffDetail.view' 状态添加一个属性.这不是必需的，但您想设置它，因为您永远不会直接进入此状态，您总是会进入其中一个子状态.

1. First, add a property to the 'manager.staffDetail.view' state of abstract:true. This isn't required, but you want to set this since you'd never go to this state directly, you'd always go to one of it's child states.

然后执行以下一项:

• 给 'manager.staffDetail.view.schedule' 状态一个 空 URL.这将使其匹配与父状态 url 相同的 url，因为它不会向父 url 附加任何内容.

• Give the 'manager.staffDetail.view.schedule' state an empty URL. This will make it match the same url as it's parent state url, because it appends nothing to the parent url.

.state('manager.staffDetail.view.schedule', {url:'', ...

或者如果你想保持默认子路由的 url 不变，那么在你的 module.config 中设置一个重定向.此处的代码会将 '/staff/{id}/view' 的任何位置重定向到 '/staff/{id}/view/schedule' 的位置:

Or if you want to keep the url of the default child route unchanged, then set up a redirect in your module.config. This code here will redirect any location of '/staff/{id}/view' to the location of '/staff/{id}/view/schedule':

$urlRouterProvider.when('/staff/{id}/view', '/staff/{id}/view/schedule');

这篇关于使用 UI-Router 在用户转换到父状态时将用户引导到子状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！