Question

我想在我的应用程序中执行类似的操作，其中相同级别的URL命中baz状态，绝对命名或带有参数的biz状态

angular.module('foo')
.config(function($stateProvider){
  $stateProvider
  .state('baz', {
    url: '/baz',
    templateUrl: '/templates/baz.html'
  })
  .state('biz', {
    url: '/:biz',
    templateUrl: '/templates/biz.html',
    resolve: {
      biz: function($stateParams){
        // resolve whatever $stateParams.biz should be
      }
    }
  })
})

然而，正在发生的事情是ui-router 总是点击biz状态，并将“baz”解释为该状态的参数。是否有一种优雅的方式让ui-router知道任何击中“/ baz”的东西应该解析为baz状态？

我知道我可以使用$stateChangeStart并执行以下操作：

$rootScope.$on('$stateChangeStart', function(event, toState, toParams){
  if (toParams.biz === "baz"){
    event.preventDefault();
    $state.go('baz')
  }
})

但这远非优雅而且看起来像是黑客。

Answer 1

我创建了a plunker here，实际上显示，上面的州代码段正在工作。为什么，因为这些状态是按正确的顺序定义的：

.state('baz', {
    url: '/baz', // url '/baz' is registered first, will be find and used
    ...
})
.state('biz', {
    url: '/:biz', // '/baz' will never reach this, because is already handled
    ...

我们如何破坏它的方法是切换状态def：

.state('biz', {
    url: '/:biz', // '/baz' will be handled by this state
    ...
.state('baz', {
    url: '/baz', // url '/baz' never reach this state def...
    ...
})

检查broken link here

摘要：

州定义顺序很重要。 使用了第一个州url匹配

ui-router--路由的URL与$ stateParams的另一个状态共享相同的级别吗？

1 个答案: