Question

我有一个使用伟大的ui-router的Angular App。

我的设置如下：

.config( function ($stateProvider, $urlRouterProvider) {

    $stateProvider

    // PROJECT DETAIL
    .state('project', {
        url: '/project/:projectId/',
        resolve: {
            /* some base api calls */
        },
        views: {
            'task-list': {
                templateUrl: 'partials/task_list.tmpl.html',
                controller: 'TaskListCtrl',
                resolve: {
                    tasks: function ($stateParams, ConcernService) {
                        return ConcernService.get('project-tasks/', $stateParams.projectId);
                    },
                }
            },
            'concern-instance': {
                /* some resolved variables */
            }
        }
    })
    .state('project.task', {
        url: 'task/:taskId/',
        views: {
            'concern-instance@': {
                /* some different resolved variables */
            },
        }
    })

这一切都像黄油一样。但是，在状态为task_list的{{1}}模板中，我希望能够访问project.task参数，以便突出显示有效的导航链接，即使网址为taskId #/project/123/task/456/为空。我理解这是因为模板只能访问为该状态声明的params。因此，如果我希望taskId状态为taskId，我应该怎么做？我是否需要在project.task中重新声明task-list？

Answer 1

在UI-Router文档here中，他们解释了

“$ stateParams对象只包含那些参数在该州注册。“

您只能使用父级的resolve属性访问子状态中的父状态参数。

将此项置于您的“项目”状态（父级）：

...    
resolve: {
    // Expose projectId parameter to child states
    projectId: ['$stateParams', function ($stateParams) {
        return $stateParams.projectId;
    }]
},

然后在你的状态'project.task'（孩子）的控制器内你应该有权访问

$stateParams.projectId

和

$stateParams.taskId

Answer 2

我注意到$state.params包含子状态参数。似乎无法找到任何文档。它只是工作

Answer 3

您是如何尝试访问taskId的？它应该是这样的，取自官方documentation：

$stateProvider
    .state('contacts.detail', {
        url: "/contacts/:contactId",
        templateUrl: 'contacts.detail.html',
        controller: function ($stateParams) {
            // If we got here from a url of /contacts/42
            expect($stateParams).toBe({contactId: 42});
        }
    })

Angular UI路由器 - 在父级中访问状态参数

3 个答案: