UI-Router无法从URL更正状态

Question

我有一些复杂的设置,有很多嵌套的标签/视图.这是我的相关部分$stateProvider

$stateProvider
    .state('tab', {
        abstract: true,
        url: '',
        templateUrl: 'tabs.html'
    })
    .state('tab.event', {
        url: '/event',
        views: {
            'event': {
                abstract: true,
                templateUrl: 'event-tabs.html'
            }
        }
    })
    .state('tab.event.list', {
        url: '/list',
        views: {
            'list': {
                templateUrl: 'event-list.html'
            }
        }
    })
    .state('tab.event.detail', {
        cache: false,
        url: '/:id',
        views: {
            'detail': {
                abstract: true,
                templateUrl: 'event-detail-tabs.html'
            }
        }
    })
    .state('tab.event.detail.info', {
        cache: false,
        url: '/info',
        views: {
            'info': {
                templateUrl: 'event-detail-info.html'
            }
        }
    })
    .state('tab.event.detail.map', {
        cache: false,
        url: '/map',
        views: {
            'map': {
                templateUrl: 'event-detail-map.html'
            }
        }
    });

• 使用ui-sref="tab.event.detail({id: event.id})"我可以链接到tab.event.detail.info状态和URL更改/event/:id/info,好.
• 如果我输入URL /event/:id,它将重定向到/event/:id/info,好.
• 但是,如果我输入URL /event/:id/info,状态将更改为tab.event.listURL /event/list,而不是好.

我希望能够分享链接/event/:id/info,/event/:id/map但他们继续重定向到/event/list
尝试了很多东西,但无法让它工作,请帮忙!

编辑:制作了一个Plunker示例,但我无法复制问题,因为我无法直接操作应用程序的URL. https://plnkr.co/edit/7iZAH26SwAILqBfkdXJS?p=preview

Answer 1

你的"tab.event.detail"状态是一个抽象状态,意味着它自身不能被自身激活的状态,所以它会在这种情况下自动加载子"tab.event.detail.info"状态.

请记住:一次只能激活一个状态.

请参阅文档https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views

Answer 2

在定义了所有状态后，您可以尝试使用它：

$urlRouterProvider
    .when('/event/:id/info', '/event/:id/info')
    .when('/event/:id/map', '/event/:id/map')

或者你可以尝试

var config = ['$rootScope', '$state',
 function ($rootScope, $state) {

  //you can make the below code better by comparing URL you are hitting in the if condition. Depending on URL you can navigate to info or map state. Also, you can make the id dynamic

  $rootScope.$on('$stateChangeStart', function (event, toState) {    
    if (toState.name == "tab.event.list") { 
      event.preventDefault()
      $state.go('tab.event.detail.info', {id: 2});
    }
  });

}]