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

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

有什么想法吗？

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-router参数导致与其他状态冲突

1 个答案: