引导用户对一个孩子的状态时，他们使用的是过渡到其父状态的用户界面，路由器 [英] Directing the user to a child state when they are transitioning to its parent state using UI-Router

问题描述

考虑以下几点：

  .STATE（'manager.staffList，网址：{url：'^ /员工阿尔法'，templateUrl：意见/ staff.list.html'数据：{activeMenu：工作人员'}，控制器：'staffListCtrl'}）
.STATE（'manager.staffDetail'，{网址：'^ /人员/ {ID}'，templateUrl：意见/ staff.html'数据：{activeMenu：'员工'}，控制器：'staffDetailsCtrl'}）
  .STATE（'manager.staffDetail.view'，{网址：'/视图'，templateUrl：意见/ staff.details.html'数据：{activeMenu：'员工'}}）
    .STATE（'manager.staffDetail.view.schedule'，{网址：'/日程安排，templateUrl：意见/ staff.view.schedule.html'数据：{activeMenu：'员工'}}）
    .STATE（'manager.staffDetail.view.history'，{网址：'/历史，templateUrl：意见/ staff.view.history.html'数据：{activeMenu：'员工'}}）
    .STATE（'manager.staffDetail.view.log'，{网址：'/日志'，templateUrl：意见/ staff.view.log.html'数据：{activeMenu：'员工'}}）
    .STATE（'manager.staffDetail.view.files'，{网址：'/文件'，templateUrl：意见/ staff.view.files.html'数据：{activeMenu：'员工'}}）
  .STATE（'manager.staffDetail.edit'，{网址：'/编辑'，templateUrl：意见/ staff.edit.html'数据：{activeMenu：'员工'}}）
 

如果我去 domain.com/staff/1234/view ，我怎么默认为 manager.staffDetail.view.schedule 子状态？

解决方案

1. 首先，属性添加到 抽象的'manager.staffDetail.view 状态：真正的 。这不是必需的，但你要设置这个，因为你从来没有直接进入这种状态下，你会经常去一个它的孩子的状态。




2. 然后做的有一个如下：

   
   

   • 输入'manager.staffDetail.view.schedule 状态下的空的​​网址。这将使它匹配相同的URL，因为它的父状态的网址，因为它没有任何附加于母公司的网址。

     .STATE（'manager.staffDetail.view.schedule，网址：{url：''，...

   
   

   • 或者，如果你想保持默认的孩子航线的网址不变，然后设置的重定向在module.config。这里这code将重定向/人员/ {ID} /视图到的位置/人员/ {ID的任何位置} /浏览/时间表：

     $ urlRouterProvider.when（'/人员/ {ID} /视图'，'/人员/ {ID} /查看/时间表'）;

   
   

Consider the following:

.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'}})

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

解决方案

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.

2. Then do one of the following:

   • 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:'', ...

   • 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');

这篇关于引导用户对一个孩子的状态时，他们使用的是过渡到其父状态的用户界面，路由器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！