Angular ui-路由器参数导致与其他状态冲突

Question

为了提供一些背景信息，我有一个包含多个独立模块的 Angular 应用程序。我正在使用 ui-router 为这些模块提供路由，我想在 URL 中使用模块的名称。在我的 Angular 应用程序配置块中，我为 module1 和 module2 定义了一个状态，每个状态都有一个参数，如下所示：

.state('module1', {
    url: '/:module_name',
    templateUrl: '/app/modules/module1/views/index.html',
    controller: 'someCtrl'
})

.state('module2', {
    url: '/:module_name',
    templateUrl: '/app/modules/module2/views/index.html',
    controller: 'someOtherCtrl'
})

我还有一些链接可以将我带到每个模块的主页。

自然地，问题是第一个状态将捕获我所有其余的 module2 路由，因为它们的 URL 都具有相同的形式：

http://localhost:3000/#/module1

http://localhost:3000/#/module2/users

http://localhost:3000/#/module2/books

等等。我可以看到我们定义统计信息的顺序很重要，但我似乎无法想出一种方法可以将模块名称作为状态参数（这很重要，因为我在相应的控制器中需要它区分uish 操作来自哪个模块）并完全避免这种层次结构问题。

有什么想法吗？

Answer 1

在您的情况下 ui-router 将不知道您指向的是哪条路由，因为它们完全相同。您要么必须对模块名称进行硬编码（假设只有几个）：

.state('module1', {
    url: '/module1',
    templateUrl: '/app/modules/module1/views/index.html',
    controller: 'someCtrl'
})

.state('module2', {
    url: '/module2',
    templateUrl: '/app/modules/module2/views/index.html',
    controller: 'someOtherCtrl'
})

.state('module2', {
    url: '/module2/users',
    templateUrl: '/app/modules/module2/views/users.html',
    controller: 'someOtherCtrl'
})

.state('module2', {
    url: '/module2/books',
    templateUrl: '/app/modules/module2/views/books.html',
    controller: 'someOtherCtrl'
})

或者根据模块号

动态注入html

.state('module', {
    url: '/module/:moduleId',
    templateUrl:
        function (stateParams){
            return '/app/modules/module' + stateParams.moduleId + '/views/index.html';
        }
    controller: 'someOtherCtrl'
})

所以现在要点击模块一，路径如下所示

http://localhost:3000/#/module/1

Angular ui-路由器参数导致与其他状态冲突

Angular ui-router parameter causes conflicts with other states

angularjs

angular-ui

angular-ui-router