it-roy-ru.com

Перенаправить состояние в подсостояние по умолчанию с помощью UI-Router в AngularJS

Я создаю вкладку на основе страницы, которая показывает некоторые данные. Я использую UI-Router в AngularJs для регистрации состояний.

Моя цель - открыть одну вкладку по умолчанию при загрузке страницы. Каждая вкладка имеет вложенные вкладки, и я бы хотел, чтобы при смене вкладок была открыта вложенная вкладка по умолчанию.

Я тестировал с функцией 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'}
})

Здесь я создал plunker demo .

На данный момент все работает, за исключением того, что у меня нет открытой вкладки по умолчанию, и это именно то, что мне нужно.

Спасибо за ваши предложения, мнения и идеи.

85
Leo

Обновление: 1.0 и далее Поддерживает redirectTo из коробки.

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


Я создал пример здесь .

Это решение происходит из приятного "комментария" к проблеме с перенаправлением с использованием .when() ( https://stackoverflow.com/a/27131114/167931 ) и действительно классное решение для этого (от Chris T, но исходное сообщение было от yahyaKacem)

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

Итак, во-первых, давайте расширим 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, чтобы сохранить историю браузера.

164
Radim Köhler

На самом деле, даже если это решение, предложенное Radim, сделало именно эту работу, мне нужно было помнить под вкладку (состояние) каждой вкладки. ,.

Поэтому я нашел другое решение, которое делает то же самое, но также запоминает каждое подсостояние вкладок.

Все, что мне нужно сделать, это установить i-router-extras и использовать функцию глубокое перенаправление :

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

Спасибо!

21
Leo

Начиная с версия 1. пользовательского интерфейса, он поддерживает свойство redirectTo. Например:

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

Начиная с версии 1.0 ui-router, хук по умолчанию был введен с использованием IHookRegistry.onBefore () , как продемонстрировано в примере управляемое данными подсостояние по умолчанию в http://angular-ui.github.io/ui-router/feature-1.0/interfaces/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);
});
6
ThmX

Если кто-то приходит сюда за ответом относительно того, как реализовать простое перенаправление для состояния, и, как это случилось со мной, не имеет возможности использовать новый маршрутизатор ...

Очевидно, если вы можете, @bblackwo ответ велик:

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

Если вы не можете, просто перенаправьте его вручную:

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

Я надеюсь, что это помогает!

1
Jose Daniel Vivar Personat
app.config(function($stateProvider,$urlRouterProvider){

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

    })
1
shubam yadav