角度ui-router和从父级访问子状态参数

Edited with more details

编辑了更多细节

Newbie question here, I am sure. I am trying to do something that I thought would be straightforward, but I am not getting anywhere.

我相信新手问题在这里。我正在尝试做一些我认为会很简单的事情，但我没有得到任何结果。

Basically, I have a parent state with several child states. I want to load some data in the resolve of the parent state so that it is available to all child states. To do this, I need a parameter (context) that is passed to the child state to be available. I am getting it via $state.params. the code (some omitted for clarity) is like this:

基本上，我有一个有几个子州的父州。我想在父状态的解析中加载一些数据，以便它可供所有子状态使用。为此，我需要一个传递给子状态的参数（上下文）可用。我通过$ state.params得到它。代码（为清楚起见省略了一些）是这样的：

.state('pbr', {
    url: "/pbr",
    templateUrl: "pbr/pbr.html",
    controller: "pbrBaseCtrl",
    abstract: true ,
    resolve: {
        dpts: function(NavDPT, $state) {
               return NavDPT.query({context: $state.params.context}).$promise;
              }
        }    

})
.state('pbr.review', {
        url: "/review/{context}?div",
        templateUrl: "pbr/pbr-review.html",
        controller: "pbrReviewCtrl"
    })

From what I understand, $state.params should contain the passed parameters for the parent and child states whereas $stateParams have the params only for the active state.

根据我的理解，$ state.params应包含父状态和子状态的传递参数，而$ stateParams仅包含活动状态的参数。

Anyway, what I am seeing is that $state.params does not get populated before the resolve happens, and thus the fetch of data fails. It does eventually get populated though. I can't seem to work out a way to wait for $state.params to be available before getting the data. I have tried wrapping the thing in a timeout, etc.

无论如何，我所看到的是$ state.params在解决问题发生之前没有填充，因此数据获取失败。它最终会填充。在获取数据之前，我似乎无法找到等待$ state.params可用的方法。我已经尝试在超时等情况下包装东西等。

I have tried to instead use query params, and have specified the query param at the parent level, and I observe this same behavior - newcontext is not available yet when the resolve happens.

我试图改为使用查询参数，并在父级别指定了查询参数，我观察到了同样的行为 - 当解决问题发生时，newcontext尚不可用。

 .state('pbr', {
            url: "/pbr?newcontext",
            templateUrl: "pbr/pbr.html",
            controller: "pbrBaseCtrl",
            abstract: true ,
            resolve: {
                dptsResource: 'NavDPT',
                dpts: function(dptsResource, $state, $log) {
                    $log.info("state.params is also ",$state.params);
                    return dptsResource.query({context: $state.params.newcontext}).$promise;
                }
            }

        })

Thanks.

谢谢。

Chris

克里斯

2 个解决方案

#1

There is an example showing how we can acces the $stateParams even in resolve function, but they must be defined in current or parent state (not in child)

有一个示例显示我们如何在解析函数中访问$ stateParams，但它们必须在当前或父状态（而不是子）中定义

So, these are the states:

所以，这些是州：

  $stateProvider
    .state('pbr', {
        // we define 2 params oldContext and newContext
        url: "/pbr/{oldContext}?newContext",
        ...
        resolve: { 
            // here we can get all params defined for our state
            dpts: function($state, $stateParams) { 
                return {
                  oldContext : $stateParams.oldContext,
                  newContext : $stateParams.newContext,
                }
            }
        }
    })
    // child will have even the context as 3rd param
    .state('pbr.review', {
      url: "/review/{context}",
      ...
    })

These are the ways how to call them:

以下是如何调用它们的方法：

// via ui-sref
ui-sref="pbr.review({oldContext: 'abc1', newContext : 'def1', context : 'xyz1'})"
ui-sref="pbr.review({oldContext: 'abc2', newContext : 'def2', context : 'xyz2'})"

// via href
href="#/pbr/abc1/review/xyz1?newContext=def1"
href="#/pbr/abc2/review/xyz2?newContext=def2"

Observe more in that plunker

在那个掠夺者中观察更多

#2

Just define params on the parent level. You will then have access to them both on parent and child levels.

只需在父级别定义params。然后，您将可以在父级和子级*问它们。

PARENT:

家长：

{
    state: 'modal',
    config: {
        url: '/modules?person_id&encounter_id',
        controller: 'ModalController',
        controllerAs: 'vm',
        templateUrl: 'app/modal/views/modal.html',
        abstract: true
    }
}

CHILD:

儿童：

{
    state: 'modal.micro',
    config: {
        url: '/micro',
        controller: 'MicroController',
        controllerAs: 'vm',
        templateUrl: 'app/micro/views/micro.html'
    }
}

ACCESS FROM MODAL CTRL (example):

来自MODAL CTRL的访问（示例）：

if (condition) {
    vm.currentPerson = _.find(DashboardModel.pane1Data.DATA_REC.DATA_LIST, function (person) {
        return person.PERSON_ID == $stateParams.person_id;
    });
}

ACCESS FROM CHILD CTRL (example):

从儿童CTRL访问（例子）：

if (condition) {
    vm.currentPerson = _.find(DashboardModel.pane1Data.DATA_REC.DATA_LIST, function (person) {
        return person.PERSON_ID == $stateParams.person_id;
    });
}

#1