[javascript] AngularJS에서 UI-Router를 사용하여 상태를 기본 하위 상태로 리디렉션

Program / 글쓴이

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

내 목표는 페이지로드시 하나의 기본 탭을 여는 것입니다. 각 탭에는 하위 탭이 있으며 탭을 변경할 때 기본 하위 탭을 열고 싶습니다.

나는 onEnter함수 로 테스트하고 있었고 내부에서 사용하고 $state.go('mainstate.substate');있지만 루프 효과 문제로 인해 작동하지 않는 것 같습니다 (state.go에서 하위 상태로 이동하여 부모 상태를 호출하고 루프로 바뀜).

$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 ) 와 그것을 위해 정말 멋진 솔루션 (크리스 T에 의해하지만 원래의 게시물은 yahyaKacem로했다)

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

따라서 먼저 리디렉션 설정으로 main을 확장 해 보겠습니다.

$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'})
      }
    });
}]);

이렇게하면 기본 리디렉션으로 상태를 조정할 수 있습니다. 여기에서 확인 하세요.

편집 : 브라우저 기록을 보존하기 위해 @Alec의 주석 옵션이 추가되었습니다.

답변

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

그래서 동일한 작업을 수행하지만 모든 탭 하위 상태를 기억하는 또 다른 솔루션을 찾았습니다.

내가해야 할 일은 ui-router-extras 를 설치 하고 깊은 상태 리디렉션 기능을 사용하는 것입니다 .

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

감사합니다!

답변

현재 버전 1.0 인터페이스 라우터의 그것이 지원하는 redirectTo속성. 예를 들면 :

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

답변

버전 1.0 UI 라우터 때문에, 기본 고리가 도입 된 사용 IHookRegistry.onBefore () 의 예에서 입증 된 바와 같이이 데이터는 기본 서브 상태를 기반 으로 http://angular-ui.github.io/ui-router/feature-1.0/ interface / transition.ihookregistry.html # 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');
  },
});

도움이 되었기를 바랍니다.

답변