web-dev-qa-db-fra.com

Rediriger un état vers un sous-état par défaut avec UI-Router dans AngularJS

Je crée une page à base d'onglets qui affiche des données. J'utilise UI-Router dans AngularJs pour enregistrer des états.

Mon objectif est d’avoir un onglet par défaut ouvert au chargement de la page. Chaque onglet a des sous-onglets et j'aimerais avoir un sous-onglet par défaut ouvert lors du changement d'onglets.

J'essayais avec la fonction onEnter et à l'intérieur j'utilise $state.go('mainstate.substate');, mais cela ne semble pas fonctionner en raison de problèmes liés à l'effet de boucle (sur state.go pour remplacer, il appelle se transforme en boucle).

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

Ici, j'ai créé un démo de plunker .

Pour l'instant, tout fonctionne, sauf que l'onglet par défaut n'est pas ouvert et c'est exactement ce dont j'ai besoin.

Merci pour vos suggestions, opinions et idées.

javascriptangularjstabsangular-ui-router
86
Leo

Mise à jour: 1.0 En avant Prise en charge de redirectTo hors de la boîte.

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

J'ai créé n exemple ici .

Cette solution provient d'un "commentaire" de Nice relatif à un problème de redirection utilisant .when() ( https://stackoverflow.com/a/27131114/167931 ) et solution vraiment sympa pour elle (par Chris T, mais le message original était de yahyaKacem)

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

Donc, premièrement, étendons le paramètre principal avec le paramètre de redirection:

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

Et ajoutez seulement ces quelques lignes dans run

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

De cette façon, nous pouvons ajuster n'importe lequel de nos états avec sa redirection par défaut ... Check it here

EDIT: Option ajoutée à partir du commentaire de @Alec pour préserver l'historique du navigateur.

166
Radim Köhler

En fait, même si cette solution proposée par Radim faisait exactement le travail, je devais me souvenir du sous-onglet de chaque onglet (état) .

J'ai donc trouvé une autre solution qui fait la même chose, mais se souvient également de chaque sous-onglet.

Je devais tous installer i-router-extras et utiliser la fonctionnalité deep state redirect :

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

Je vous remercie!

21
Leo

À partir de version 1. du routeur ui, il prend en charge une propriété redirectTo. Par exemple:

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

Depuis la version 1.0 de ui-router, un hook par défaut a été introduit en utilisant IHookRegistry.onBefore () , comme illustré dans l'exemple Sub Drow Data Subiven Default dans 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

Si quelqu'un vient ici pour obtenir une réponse sur la manière de mettre en œuvre une redirection simple pour un État et, ce qui m'est arrivé, n'a pas la possibilité d'utiliser le nouveau routeur ...

Évidemment encore une fois si vous le pouvez, @bblackwo answer est génial:

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

Si vous ne pouvez pas alors simplement le rediriger manuellement:

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

J'espère que ça aide!

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

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

    })
1
shubam yadav