获取用于解析的路由参数

时间:2021-12-14 11:09:12

I'm getting killed by my inability to grok Angular-UI UI-Router. I have a state defined as follows:

我因无法使用Angular-UI ui路由器而死。我的状态定义如下:

$stateProvider
    .state('member', {
        url: '/member/:membersId',
        templateUrl: 'templates/member.html',
        resolve : {
            // From examples for testing
            simpleObj:  function(){
                return {value: 'simple!'};
            },

            memberDetails : function(FamilyService,$state) {

                return FamilyService.getMember($state.current.params.membersId);

            }
        },
        controller: 'MemberController'
    });

Since the docs say $stateParams aren't available, I'm using $state.current.params. Should be fine. Instead, I get dead air. I can't access the membersId to save my life.

因为文档说$stateParams不可用,所以我使用$state.current.params。应该没事的。相反,我变得毫无生气。为了救我的命,我不能使用会员卡。

To test my service and make sure it's not the problem, I hard coded in a membersId and the controller gets the memberDetails result as well as the simpleObj result. So, Service and Controller and working great.

为了测试我的服务并确保它不是问题,我硬编码了一个membersId,控制器将获得memberDetails结果以及simpleObj结果。服务和控制器都很好用。

Example of that hardcoded:

硬编码的例子:

$stateProvider
    .state('member', {
        url: '/member/:membersId',
        templateUrl: 'templates/member.html',
        resolve : {
            // From examples for testing
            simpleObj:  function(){
                return {value: 'simple!'};
            },

            memberDetails : function(FamilyService,$state) {

                return FamilyService.getMember('52d1ebb1de46c3f103000002');

            }
        },
        controller: 'MemberController'
    });

Even though the docs say you can't use $stateParams in a resolve, I've tried it anyway. It doesn't work either.

即使文档说你不能使用$stateParams解析,我还是尝试过了。它不工作。

return FamilyService.getMember($stateParams.membersId);

返回FamilyService.getMember($ stateParams.membersId);

How in the world do I get the membersId param to get passed into the FamilyService for the resolve?

我究竟怎样才能得到这个成员呢?

I don't have much hair left to pull out; so, someone save me please.

我没有多少头发可以拔掉;请救救我。

1 个解决方案

#1


24  

I finally figured this out. It was quite simple and in the docs. Despite reading several times, I overlooked it each time. I needed to inject $stateParams into the resolve:

我终于明白了。它非常简单,而且在文档中。尽管我读了好几遍,但每次都忽略了它。我需要向解决方案注入$stateParams:

$stateProvider
    .state('member', {
        url: '/member/:membersId',
        templateUrl: 'templates/member.html',
        resolve : {
            simpleObj:  function(){
                return {value: 'simple!'};
            },

            memberDetails : function(FamilyService,$stateParams) {
                return FamilyService.getMember($stateParams.membersId);
            }
        },
        controller: 'MemberController'
    });

I still don't understand why the documentation says this is not possible.

我仍然不明白为什么文档说这是不可能的。

Two Important $stateParams Gotchas

两个重要的stateParams美元陷阱

The $stateParams object is only populated after the state is activated and all dependencies are resolved. This means you won't have access to it in state resolve functions. Use $state.current.params instead. $stateProvider.state('contacts.detail', { resolve: { someResolve: function($state){ //* We cannot use $stateParams here, the service is not ready // // Use $state.current.params instead *// return $state.current.params.contactId + "!" }; }, // ... })

$stateParams对象只在状态激活后填充,所有依赖项都被解析。这意味着您无法在状态解析函数中访问它。使用state.current美元。参数个数。我们不能在这里使用$stateParams,服务还没有准备好// // /使用$state.current。相反,返回$state.current.params。contactId +”!”};},/ /……})

#1


24  

I finally figured this out. It was quite simple and in the docs. Despite reading several times, I overlooked it each time. I needed to inject $stateParams into the resolve:

我终于明白了。它非常简单,而且在文档中。尽管我读了好几遍,但每次都忽略了它。我需要向解决方案注入$stateParams:

$stateProvider
    .state('member', {
        url: '/member/:membersId',
        templateUrl: 'templates/member.html',
        resolve : {
            simpleObj:  function(){
                return {value: 'simple!'};
            },

            memberDetails : function(FamilyService,$stateParams) {
                return FamilyService.getMember($stateParams.membersId);
            }
        },
        controller: 'MemberController'
    });

I still don't understand why the documentation says this is not possible.

我仍然不明白为什么文档说这是不可能的。

Two Important $stateParams Gotchas

两个重要的stateParams美元陷阱

The $stateParams object is only populated after the state is activated and all dependencies are resolved. This means you won't have access to it in state resolve functions. Use $state.current.params instead. $stateProvider.state('contacts.detail', { resolve: { someResolve: function($state){ //* We cannot use $stateParams here, the service is not ready // // Use $state.current.params instead *// return $state.current.params.contactId + "!" }; }, // ... })

$stateParams对象只在状态激活后填充,所有依赖项都被解析。这意味着您无法在状态解析函数中访问它。使用state.current美元。参数个数。我们不能在这里使用$stateParams,服务还没有准备好// // /使用$state.current。相反,返回$state.current.params。contactId +”!”};},/ /……})