UI-Router가 Angular에 있는 기본 서브스테이트로 상태 리다이렉트JS

UI-Router가 Angular에 있는 기본 서브스테이트로 상태 리다이렉트JS

몇 가지 데이터를 보여주는 탭 기반 페이지를 만들고 있습니다.AngularJs에서 UI-Router를 사용하여 상태를 등록하고 있습니다.

제 목표는 페이지 로드 시 기본 탭 하나를 여는 것입니다.탭마다 하위 탭이 있으며 탭을 변경할 때 기본 하위 탭을 열었으면 합니다.

테스트하고 있었는데onEnter기능 및 내부에서는$state.go('mainstate.substate');다만, 루프 효과의 문제(on state.go에서 substate로 이동해 부모 상태를 호출하는 등)에 의해 동작하지 않는 것 같습니다.

$stateProvider

.state('main', {
  url: '/main',
  templateUrl: 'main.html',
  onEnter: function($state) {
    $state.go('main.street');
  }
})

.state('main.street', {
  url: '/street',
  templateUrl: 'submenu.html',
  params: {tabName: 'street'}
})

여기에 플런커 데모를 만들었습니다.

현재로선 기본 탭이 열려 있지 않은 것 외에는 모든 것이 작동합니다.

제안, 의견, 아이디어 감사합니다.

업데이트: 1.0 이후로는 redirectTo를 즉시 사용할 수 있습니다.

https://ui-router.github.io/ng1/docs/latest/interfaces/state.statedeclaration.html#redirectto

---

제가 예를 들어봤습니다.

이 솔루션은 적절한 "댓글"을 사용하여 리다이렉트 문제를 해결합니다..when() (https://stackoverflow.com/a/27131114/1679310) 및 이를 위한 매우 멋진 솔루션 (Chris T에 의해 작성되었습니다만, 원래의 투고는 yahyaKacem에 의해 작성되었습니다)

https://github.com/angular-ui/ui-router/issues/1584#issuecomment-75137373

우선 리다이렉트 설정으로 메인 확장을 실시합니다.

$stateProvider
    .state('main', {
      url: '/main',
      templateUrl: 'main.html',
      redirectTo: 'main.street',
    })

그리고 이 몇 줄만 실행에 추가합니다.

app.run(['$rootScope', '$state', function($rootScope, $state) {

    $rootScope.$on('$stateChangeStart', function(evt, to, params) {
      if (to.redirectTo) {
        evt.preventDefault();
        $state.go(to.redirectTo, params, {location: 'replace'})
      }
    });
}]);

이렇게 하면 기본 리다이렉션을 사용하여 상태를 조정할 수 있습니다.이쪽에서 확인

편집: 브라우저 이력을 유지하기 위해 @Alex의 코멘트에서 옵션을 추가했습니다.

실제로 Radim이 제안한 솔루션이 제대로 작동하더라도 모든 탭의 하위 탭(상태)을 기억해야 했습니다.

그래서 저는 같은 일을 하면서도 모든 탭 서브스테이트를 기억하는 다른 해결책을 찾았습니다.

ui-router-extras를 설치하고 딥 스테이트 리다이렉트 기능을 사용하면 됩니다.

$stateProvider
  .state('main.street', {
     url: '/main/street',
     templateUrl: 'main.html',
     deepStateRedirect: { default: { state: 'main.street.cloud' } },
  });

감사해요!

버전 1.0의 UI 라우터에서는redirectTo소유물.예를 들어 다음과 같습니다.

.state('A', {
  redirectTo: 'A.B'
})

http://angular-ui.github.io/ui-router/feature-1.0/interfaces/transition.ihookregistry.html#onbefore의 Data-Drived Default Substate 예에서 알 수 있듯이 UI 버전 1.0 이후 IHookRegistry.onBefore()를 사용하여 기본 후크가 도입되었습니다.

// state declaration
{
  name: 'home',
  template: '<div ui-view/>',
  defaultSubstate: 'home.dashboard'
}

var criteria = {
  to: function(state) {
    return state.defaultSubstate != null;
  }
}
$transitions.onBefore(criteria, function($transition$, $state) {
  return $state.target($transition$.to().defaultSubstate);
});

app.config(function($stateProvider,$urlRouterProvider){

    $urlRouterProvider.when("/state","/state/sub-state");

    })

스테이트의 간단한 리다이렉트를 실장하는 방법에 관한 회답이 있어, 새로운 라우터를 사용할 기회가 없는 경우.

@bblackwo의 답변은 다음과 같습니다.

$stateProvider.state('A', {
  redirectTo: 'B',
});

수동으로 리다이렉트 할 수 없는 경우는, 다음의 순서에 따릅니다.

$stateProvider.state('A', {
  controller: $state => {
    $state.go('B');
  },
});

도움이 됐으면 좋겠네요!

언급URL : https://stackoverflow.com/questions/29491079/redirect-a-state-to-default-substate-with-ui-router-in-angularjs