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

"ui-router" $stateParams vs. $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
}

문제는, 왜 다른가 하는 것입니다.또, 어느쪽인가를 사용하는 타이밍과 이유에 관한 베스트 프랙티스에 관한 가이드 라인이 있습니까?

이 문서에서는, 다음의 URL 에 조사 결과를 재차 기재하고 있습니다.https://github.com/angular-ui/ui-router/wiki/URL-Routing#stateparams-service

맞다면$stateParams보다 $state.params로서, '도움말'을 쓰는 수 있습니다$state.params.

베스트 프랙티스의 가이드 라인이 있는지는 의문이지만, 콘텍스트가 우선입니다. , 「URL」을 합니다.$stateParams 자체에 좀 더 것을 는 '알고 싶을 때'를 사용하세요$state.

사용해야 하는 다른 이유$state.params는, 가 아닌를 대상으로 하고 .이 상태는 (내되어 있지 않고 강력합니다.URL은 매우 불충분합니다.

URL에 공개하지 않고 상태를 통과하는 방법에 대해 구글에서 검색하던 중 이 사실을 발견하고 SO의 다른 곳에 있는 질문에 답했습니다.

기본적으로 다음과 같은 구문을 사용할 수 있습니다.

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

이 은 버전 편에 입니다: 이 、 이 、 edit 、 edit 、 edit 、 edit edit edit edit edit 。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'}
      }
    })

나는 어떤 것을 해결하는 루트 상태를 가지고 있다. ★★$state 매개 는 해결의 $state.params단, ,, 을을 $stateParamscontracty underbanda 。

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.param는 그렇지 않습니다.

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

이 기사에서는, 다음과 같이 명확하게 설명하고 있습니다.그$stateservice는 상태를 조작하기 위한 유용한 방법 및 현재 상태에 대한 관련 데이터를 제공합니다.현재 상태 파라미터는$stateparams 키로 서비스를 제공합니다.그$stateParamsservice는 동일한 개체를 반환합니다.그 때문에,$stateParams는 서비스 엄밀한 입니다.$state★★★★★★★★★★★★★★★★★★.

어떤 도 두 의 컨트롤러 모두 는 안 .$state 및 그 서비스인 "서비스"와 "서비스"의 조합되어 있습니다.$stateParams의 .$state, 「인젝트」를 할 필요가 있습니다.컨트롤러를 다시 작성하여$stateParams★★★★★★ 。

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