angular ui-router 和从父级访问子状态参数 [英] angular ui-router and accessing child state params from parent
问题描述
编辑了更多细节
这里是新手问题,我敢肯定.我正在尝试做一些我认为很简单的事情,但我一无所获.
Newbie question here, I am sure. I am trying to do something that I thought would be straightforward, but I am not getting anywhere.
基本上,我有一个带有多个子状态的父状态.我想在父状态的解析中加载一些数据,以便所有子状态都可以使用它.为此,我需要一个传递给子状态的参数(上下文)可用.我是通过 $state.params
获取的.代码(为了清楚起见省略了一些)是这样的:
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('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"
})
据我所知,$state.params
应该包含传递给父状态和子状态的参数,而 $stateParams
只包含活动状态的参数.
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
在解析发生之前没有被填充,因此数据获取失败.不过它最终会被填充.我似乎无法找到一种在获取数据之前等待 $state.params
可用的方法.我曾尝试将事物包装在超时等中.
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.
我尝试改用查询参数,并在父级指定了查询参数,我观察到了同样的行为 - 解析发生时 newcontext 尚不可用.
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.
.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;
}
}
})
谢谢.
推荐答案
有一个例子 展示了我们如何访问 $stateParams
即使在 resolve
函数中,但它们必须在 current 或 parent中定义em> 状态 (不在孩子中)
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)
所以,这些是状态:
$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"
观察更多 plunker
这篇关于angular ui-router 和从父级访问子状态参数的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!