angularjs - 使用相似的 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 状态时，'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 将触发它找到的第一个匹配项。