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

으로 ui-router, 그것은 가능 주입하거나 $state또는$stateParams 컨트롤러에 하여 URL의 매개 변수에 액세스 할 수 있습니다. $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>

편집 :이 답변은 버전에 맞습니다 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"

한 경로에서 다른 경로로 이전 상태 매개 변수를 전달하는 동안 내가 만든 흥미로운 관찰은 $ stateParams가 현재 상태 매개 변수와 함께 전달 된 이전 경로의 상태 매개 변수를 끌어 올려 덮어 쓰지만 $state.params를 사용하면 그렇지 않다는 것입니다.

사용시 $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'}}

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

이 기사에서는 다음 과 같이 명확하게 설명합니다.이 $state서비스는 현재 상태에 대한 관련 데이터뿐만 아니라 상태를 조작하는 데 유용한 여러 가지 방법을 제공합니다. 현재 상태 매개 변수는 $stateparams 키에서 서비스에 액세스 할 수 있습니다 . $stateParams서비스는 바로이 같은 개체를 반환합니다. 따라서이 $stateParams서비스는 엄격하게 매개 변수 객체에 빠르게 액세스 할 수있는 편의 서비스입니다.$state 서비스입니다.

따라서 어떤 컨트롤러도 $state서비스와 편의 서비스를 모두 주입해서는 안됩니다 $stateParams. 이 경우 $state, 현재 액세스 파라미터 단지 주입되고, 상기 제어기는 다시 주입되어야 $stateParams하는 대신.