angular ui-router: 해결 중인 toState의 $state 정보를 가져옵니다.

angular ui-router: 해결 중인 toState의 $state 정보를 가져옵니다.

업데이트: 현재 angular-ui-router에서 가능합니다.1.0.0alpha0릴리스 노트 https://github.com/angular-ui/ui-router/releases/tag/1.0.0alpha0 및 내가 작성한 문제를 참조하십시오.

해결 작업 시 angular ui-router를 사용하여 앱에서 탐색하는 상태 이름 및 기타 속성에 액세스하고 싶습니다.

이유:앱이 해당 페이지에 들어갈 수 있도록 하기 전에 일부 사용자 데이터(액세스 권한 포함)를 비동기적으로 로드하고 싶습니다.

현재 $state를 이동 중인 상태가 아닌 이동 중인 폼의 해결 지점에 삽입하기 때문에 이 작업은 불가능합니다.

할 수 있다는 거 알아

• $rootScope('$state')를 사용하여 다른 곳으로 ToState를 가져옵니다.예를 들어 ChangeStart'를 클릭하여 설정 서비스에 저장합니다.하지만 좀 지저분한 것 같아요.
• 상태를 하드코드로 해결합니다만, 모든 페이지에 대한 해결을 재사용하고 싶지 않습니다.

UI-router github에서도 문제를 만들었습니다(관심있으시면 +1).https://github.com/angular-ui/ui-router/issues/1018

지금까지의 내 암호는 이렇다.아무쪼록 잘 부탁드립니다!

.config(function($stateProvider) {

    $stateProvider.state('somePage', {
        // ..
        resolve: {
            userData: function($stateParams, $state, Settings) {
                return Settings.getUserData() // load user data asynchronously
                    .then(function (userData) {
                        console.log($stateParams);
                        console.log($state);
                        // Problem: $state still points to the state you're navigating away from
                    });
            }
        }
    });
});

Ui-Router 1.x 업데이트

$provide.decorator('$state', ($delegate, $transitions) => {
    $transitions.onStart({}, (trans) => {
      $delegate.toParams = trans.params()
      $delegate.next = trans.to().name
    })
    return $delegate
  })

Ui-Router 0.x

언제든지 꾸밀 수 있다.$state와 함께next그리고.toParams속성:

angular.config(function($provide) {
  $provide.decorator('$state', function($delegate, $rootScope) {
    $rootScope.$on('$stateChangeStart', function(event, state, params) {
      $delegate.next = state;
      $delegate.toParams = params;
    });
    return $delegate;
  });
});

그리고 다음과 같이 사용:

.state('myState', {
    url: '/something/{id}',
    resolve: {
        oneThing: function($state) {
            console.log($state.toParams, $state.next);
        }
    }
});

그래서 제가 직접 답을 찾아냈죠코드가 내 코드와 동일하게 동작하는 경우 $stateParams 개체는 올바르게 삽입되지만 $state는 빈(또는 오래된) 상태 개체입니다.

제가 효과가 있었던 건this다음과 같이 설정합니다.

.state('myState', {
    url: '/something/{id}',
    templateUrl: '/myTemplate.html',
    controller: function() {},
    resolve: {
        oneThing: function($stateParams) {
            console.log($stateParams); // comes through fine
            var state = this;
            console.log(state); // will give you a "raw" state object
        }
    }
})

첫 번째 로그는 예상대로 돌아갑니다.두 번째 로그는 "raw"(더 나은 용어가 없는 경우) 상태 개체를 반환합니다.예를 들어, 주의 이름을 얻으려면this.self.name.

이게 바람직하지 않다는 걸 알지만...$state(또는 다른 표준화된 오브젝트)를 통해 이 정보를 얻을 수 있지만, 이것이 제가 찾을 수 있는 최선의 정보입니다.

도움이 됐으면 좋겠는데...

this.toString()은 상태 이름을 지정합니다.

이것은 여기에 요청되었습니다.

이 건물들은 마치1.0.0-rc.2 $state$해결 함수에 주입하여 이 정보를 얻을 수 있습니다.

resolve: {
  oneThing: function($state$) {
    console.log($state$);
  }
}

언급URL : https://stackoverflow.com/questions/22985988/angular-ui-router-get-state-info-of-tostate-in-resolve