Question

我有一个项目需要分开的父路由，以隔离URL，控制器和API调用。

/桌面游戏/：ID /评论/
/桌面游戏/：ID /安装/

我想解决的问题是如何为所有父路线建立一个共同的子路由？

/桌面游戏/：ID /评论/规则/
/桌面游戏/：ID /安装/规则/

以下是当前UI-Router配置的简化版本：

    .state('app.frontend.view', {
        abstract: true,
        url: '/boardgames/:id',
        views: {
            'page@': {
                templateUrl: 'public/html/game/view/index.html',
                resolve: {},
                controller: 'View'
            }
        }
    })
    .state('app.frontend.view.review', {
        url: '/review/',
        views: {
            'tab@app.frontend.view': {
                templateUrl: 'public/html/game/tabs/review/index.html',
                resolve: {},
                controller: 'ViewReview'
            }
        }
    })
    .state('app.frontend.view.setup', {
        url: '/setup/',
        views: {
            'tab@app.frontend.view': {
                templateUrl: 'public/html/game/tabs/setup/index.html',
                resolve: {},
                controller: 'ViewSetup'
            }
        }
    });

这是HTML结构：（public / html / game / view / index.html）

<div class='item'>
    <div ui-view='tab'></div>
</div>

所有人都在努力解决这个问题。

我正在考虑传递另一个参数来创建动态状态...然后链接子路由：

.state('app.frontend.view.{{:path}}', {
    url: '/:path/',
    views: {
        'tab@app.frontend.view': {
            templateUrl: 'public/html/game/tabs/:path/index.html',
            resolve: {},
            controller: ':path' (format :path into friendly name)
        }
    }
})
.state('app.frontend.view.{{:path}}.rules', {
    url: '/rules/',
    views: {
        'rules@app.frontend.view': {
            templateUrl: 'public/html/game/tabs/rules/index.html',
            resolve: {},
            controller: 'ViewRules'
        }
    }
});

这是前进的最佳方式吗？

Answer 1

在进一步研究这个主题后，我发现：

应在配置阶段锁定状态命名。

.state('app.frontend.view.{{:path}}', {}

等于：

.state('app.frontend.view.image', {}

Url会包含参数＆＃39; /：path /，templateUrl和控制器都可以锁定名称并以不同方式使用参数：

在路由器解析中它将是：

resolve: {
    tabResolve: ['$stateParams', 'game', function($stateParams, game) {
        return game.show({
            id: $stateParams.id,
            tab: $stateParams.tab
        }).$promise;
    }]
}

现在只需要一个控制器，因为传入的数据对于每个参数都是不同的（查看，设置）。

多个父母国家的UI路由器子状态

1 个答案: