使用类似 URL 模式时 UI 路由器冲突

Question

我的 app.config 中定义了以下 2 个状态：

state('product-details', {
    url: '/products/:productId',
    templateUrl: '/pages/product-details/product-details.tmpl.html',
    controller: 'ProductDetailsController'
})

和

state('product-register', {
    url: '/products/register',
    templateUrl: '/pages/product-register/product-register.tmpl.html',
    controller: 'ProductRegisterController'
})

我面临的问题是，由于它们的 URL 模式相似，当我尝试导航到 product-register 状态时，“注册”被 angularui-router 解释为 productId 并将我重定向到 product-details改为状态。

在解决了一些关于 SO 的类似问题后，我想我会使用正则表达式过滤这些 URL，如 here 所述。但是当我尝试这个时，虽然正则表达式单独匹配正确，但状态拒绝改变。

在做了一些研究之后，我决定像这样合并这两个状态：

state('product-details', {
     url: '/products/:param',
    templateUrl: ['$stateParams', function($stateParams) {
        if($stateParams.param === 'register') {
            return '/pages/product-register/product-register.tmpl.html';
        } else {
            return '/pages/product-details/product-details.tmpl.html';
        }
    }],
    controller: ['$stateParams', function($stateParams) {
        if($stateParams.param === 'register') {
            return 'ProductRegisterController';
        } else {
            return 'ProductDetailsController';
        }
    }]
})

这似乎也没有按预期工作。我错过了什么？这不是很正常的事情吗？

Answer 1

尝试将“产品注册”状态移至“产品详细信息”状态之前。

实际上，您需要区分您的状态 URL 模式，否则 Angular 将触发它找到的第一个匹配项。

Answer 2

您应该能够为参数指定类型以仅匹配某些状态。

在您的情况下，您可以使用：

url: '/products/{productId:int}'

在 ui 路由器页面上还有很多其他示例： https://github.com/angular-ui/ui-router/wiki/URL-Routing