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

Question

我有一个使用伟大的ui路由器的Angular应用程序.

我的设置如下:

.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模板时,状态project.task,我希望能够访问taskIdPARAM,所以我可以强调积极的导航链接,即使网址为#/project/123/task/456/的taskId是空的.我理解这是因为模板只能访问为该状态声明的params.所以,如果我想获得taskId的project.task状态,我应该怎么办呢？我是否需要重新申报task-list的project.task？

Answer 1

在UI-Router文档中,他们解释了这一点

"$ stateParams对象只包含在该状态下注册的参数."

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

把它放在你的'项目'状态(父):

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

然后在你的控制器内为你的状态'project.task'(孩子),你应该有权访问这两个

$stateParams.projectId

和

$stateParams.taskId

Answer 2

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

$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});
        }
    })