`ui-router` $ stateParams vs. $ state.params

`ui-router` $ stateParams vs. $ state.params

---

을 사용 하면 URL의 매개 변수에 액세스하기 위해 컨트롤러에 또는 컨트롤러에 ui-router삽입 할 수 있습니다. 그러나 매개 변수를 통해 액세스하면 해당 컨트롤러에 액세스하는 컨트롤러가 관리하는 상태 및 상위 상태에 속하는 매개 변수 만 표시 되며 모든 하위 상태의 매개 변수를 포함하여 모든 매개 변수가 있습니다.$state$stateParams$stateParams$state.params

다음 코드가 주어지면 URL을 직접로드 http://path/1/paramA/paramB하면 컨트롤러가로드 될 때의 방식입니다.

$stateProvider.state('a', {
     url: 'path/:id/:anotherParam/',
     controller: 'ACtrl',
  });

$stateProvider.state('a.b', {
     url: '/:yetAnotherParam',
     controller: 'ABCtrl',
  });

module.controller('ACtrl', function($stateParams, $state) {
   $state.params; // has id, anotherParam, and yetAnotherParam
   $stateParams;  // has id and anotherParam
}

module.controller('ABCtrl', function($stateParams, $state) {
   $state.params; // has id, anotherParam, and yetAnotherParam
   $stateParams;  // has id, anotherParam, and yetAnotherParam
}

문제는 왜 다른가? 그리고 언제 그리고 왜 사용해야하는지에 대한 모범 사례 지침이 있습니까?

---

이 문서는 https://github.com/angular-ui/ui-router/wiki/URL-Routing#stateparams-service에서 발견 한 내용을 반복합니다.

내 기억이 봉사한다면 $stateParams, 원래보다 늦게 소개되었고 $state.params, 지속적인 글쓰기를 피하는 간단한 도우미 인젝터 인 것 같습니다 $state.params.

모범 사례 지침이 의심 스럽지만 컨텍스트가 나에게 도움이됩니다. 단순히 URL로 수신 된 매개 변수에 액세스하려면을 사용하십시오 $stateParams. 상태 자체에 대해 더 복잡한 것을 알고 싶다면을 사용하십시오 $state.

---

사용하는 또 다른 이유 $state.params는 URL 기반이 아닌 상태에 대한 것입니다.

방금 URL에 노출시키지 않고 상태를 전달하는 방법에 대해 인터넷 검색을하면서 다른 곳 에서 질문에 대답했습니다 .

기본적으로 다음과 같은 구문을 허용합니다.

<a ui-sref="toState(thingy)" class="list-group-item" ng-repeat="thingy in thingies">{{ thingy.referer }}</a>

---

편집 :이 답변은 version에 맞습니다 0.2.10. @Alexander Vasilyev가 지적했듯이 버전에서는 작동하지 않습니다 0.2.14.

사용해야하는 또 다른 이유 $state.params는 다음과 같은 쿼리 매개 변수를 추출해야 할 때입니다.

$stateProvider.state('a', {
  url: 'path/:id/:anotherParam/?yetAnotherParam',
  controller: 'ACtrl',
});

module.controller('ACtrl', function($stateParams, $state) {
  $state.params; // has id, anotherParam, and yetAnotherParam
  $stateParams;  // has id and anotherParam
}

---

이 둘 사이에는 많은 차이점이 있습니다. 그러나 실제로 작업하는 동안 $state.params더 잘 사용한다는 것을 알았습니다 . 더 많은 매개 변수를 사용하면에서 유지 관리하기가 어려울 수 있습니다 $stateParams. URL 매개 변수 $state가 아닌 여러 매개 변수를 사용하면 매우 유용합니다.

 .state('shopping-request', {
      url: '/shopping-request/{cartId}',
      data: {requireLogin: true},
      params : {role: null},
      views: {
        '': {templateUrl: 'views/templates/main.tpl.html', controller: "ShoppingRequestCtrl"},
        'body@shopping-request': {templateUrl: 'views/shops/shopping-request.html'},
        'footer@shopping-request': {templateUrl: 'views/templates/footer.tpl.html'},
        'header@shopping-request': {templateUrl: 'views/templates/header.tpl.html'}
      }
    })

---

sth를 해결하는 루트 상태가 있습니다. $stateresolve 매개 변수로 전달 한다고의 가용성을 보장하지는 않습니다 $state.params. 그러나 $stateParams의지를 사용 합니다.

var rootState = {
    name: 'root',
    url: '/:stubCompanyId',
    abstract: true,
    ...
};

// case 1:
rootState.resolve = {
    authInit: ['AuthenticationService', '$state', function (AuthenticationService, $state) {
        console.log('rootState.resolve', $state.params);
        return AuthenticationService.init($state.params);
    }]
};
// output:
// rootState.resolve Object {}

// case 2:
rootState.resolve = {
    authInit: ['AuthenticationService', '$stateParams', function (AuthenticationService, $stateParams) {
        console.log('rootState.resolve', $stateParams);
        return AuthenticationService.init($stateParams);
    }]
};
// output:
// rootState.resolve Object {stubCompanyId:...}

"angular"사용 : "~ 1.4.0", "angular-ui-router": "~ 0.2.15"

---

An interesting observation I made while passing previous state params from one route to another is that $stateParams gets hoisted and overwrites the previous route's state params that were passed with the current state params, but using $state.params doesn't.

When using $stateParams:

var stateParams        = {};
stateParams.nextParams = $stateParams; //{item_id:123}
stateParams.next       = $state.current.name;

$state.go('app.login', stateParams);
//$stateParams.nextParams on app.login is now:
//{next:'app.details', nextParams:{next:'app.details'}}

When using $state.params:

var stateParams        = {};
stateParams.nextParams = $state.params; //{item_id:123}
stateParams.next       = $state.current.name;

$state.go('app.login', stateParams);
//$stateParams.nextParams on app.login is now:
//{next:'app.details', nextParams:{item_id:123}}

---

Here in this article is clearly explained: The $state service provides a number of useful methods for manipulating the state as well as pertinent data on the current state. The current state parameters are accessible on the $state service at the params key. The $stateParams service returns this very same object. Hence, the $stateParams service is strictly a convenience service to quickly access the params object on the $state service.

As such, no controller should ever inject both the $state service and its convenience service, $stateParams. If the $state is being injected just to access the current parameters, the controller should be rewritten to inject $stateParams instead.

참고URL : https://stackoverflow.com/questions/23081397/ui-router-stateparams-vs-state-params