Comment aurais-je ui-router aller à un lien externe, tels que google.com?

par exemple:

 $stateProvider
            .state('external', {
                url: 'http://www.google.com',

            })
L'url

suppose qu'il s'agit d'un état interne. Je veux que ce soit comme href ou quelque chose comme ça.

j'ai une structure de navigation qui permettra de construire à partir de l'interface utilisateur-routes et j'ai besoin d'un lien pour aller vers un lien externe. Pas nécessairement juste google, ce n'est qu'un exemple.

ne cherche Pas dans un lien ou $état.href (' http://www.google.com "). J'en ai besoin de façon déclarative dans la configuration des routes.

22
demandé sur Pankaj Parkar 2015-05-13 19:54:00

4 réponses

Angular-ui-router ne supporte pas les URL externes, vous devez rediriger l'utilisateur en utilisant soit $location.url() ou $window.open()

je vous suggérerais d'utiliser $window.open('http://www.google.com', '_self') qui ouvrira L'URL sur la même page.

mise à Jour

vous pouvez également personnaliser ui-router en ajoutant le paramètre external , il peut être true / false .

  $stateProvider
  .state('external', {
       url: 'http://www.google.com',
       external: true
  })

alors configurer $stateChangeStart dans votre état et gérer la partie de redirection là.

Exécuter En Bloc

myapp.run(function($rootScope, $window) {
  $rootScope.$on('$stateChangeStart',
    function(event, toState, toParams, fromState, fromParams) {
      if (toState.external) {
        event.preventDefault();
        $window.open(toState.url, '_self');
      }
    });
})

Échantillon Plongeur

Note : ouvrez Plunkr dans une nouvelle fenêtre afin de la faire fonctionner, parce que google ne s'ouvre pas dans iFrame en raison de certaines des raisons de sécurité.

32
répondu Pankaj Parkar 2015-05-13 17:43:20

, Vous pouvez utiliser le onEnter rappel:

 $stateProvider
    .state('external', {
        onEnter: function($window) {
            $window.open('http://www.google.com', '_self');
        }
    });

Modifier

en S'appuyant sur la réponse de pankajparkar, comme je l'ai dit, je pense que vous devriez éviter de passer outre un nom de param existant. ui-router a fait beaucoup d'efforts pour faire la distinction entre les États et les url, donc utiliser à la fois url et externalUrl pourrait avoir du sens...

donc, j'implémenterais un externalUrl param:

myApp.run(function($rootScope, $window) {
    $rootScope.$on(
        '$stateChangeStart',
        function(event, toState, toParams, fromState, fromParams) {
            if (toState.externalUrl) {
                event.preventDefault();
                $window.open(toState.externalUrl, '_self');
            }
        }
    );
});

et l'utiliser comme tel, avec ou sans url interne:

$stateProvider.state('external', {
    // option url for sref
    // url: '/to-google',
    externalUrl: 'http://www.google.com'
});
24
répondu rixo 2015-05-13 17:49:56

comme mentionné dans angulaire.js lien de comportement désactiver les liens profonds pour des Url spécifiques vous devez juste utiliser

<a href="newlink" target="_self">link to external</a>

ceci désactivera le routage angularJS sur un lien désiré spécifique.

7
répondu Ebrahim 2017-05-23 12:26:23

j'ai transformé la réponse acceptée en une qui suppose la dernière version D'AngularJS (actuellement 1.6), ui-routeur 1.x , Webpack 2 avec transpilation Babel et le plugin ng-annoté pour Babel .

.run(($transitions, $window) => {
  'ngInject'
  $transitions.onStart({
    to: (state) => state.external === true && state.url
  }, ($transition) => {
    const to = $transition.to()
    $window.open(to.url, to.target || '_self')
    return false
  })
})

Et voici comment l'état peut être configuré:

.config(($stateProvider) => {
  'ngInject'
  $stateProvider
    .state({
      name: 'there',
      url:'https://google.com',
      external: true,
      target: '_blank'
    })
})

Utilisation:

<a ui-sref="there">To Google</a>
0
répondu Christiaan Westerbeek 2017-09-05 10:36:04