web-dev-qa-db-fra.com

Comment pourrais-je faire en sorte que ui-router utilise un lien externe, tel 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 à cet effet.

J'ai une structure de navigation qui sera construite à partir des routes ui et il me faut un lien pour accéder à un lien externe. Pas nécessairement juste Google, ce n'est qu'un exemple. 

Ne le cherche pas dans un lien ou sous la forme $ state.href (' http://www.google.com '). Il en a besoin de manière déclarative dans la configuration des routes.

angularjsroutingangular-ui-routersingle-page-applicationangularjs-routing
24
Shane

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

Je vous suggère d'utiliser $window.open('http://www.google.com', '_self') qui ouvrira l'URL sur la même page.

Mettre à jour

Vous pouvez également personnaliser ui-router en ajoutant le paramètre external. Il peut s'agir de truefalse.

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

Puis configurez $stateChangeStart dans votre partie état & handle redirection.

_/Run Block

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

Sample Plunkr

Note: Ouvrez Plunkr dans une nouvelle fenêtre afin de le rendre opérationnel, car google ne s'ouvre pas dans iFrame pour des raisons de sécurité.

33
Pankaj Parkar

Vous pouvez utiliser le onEnter callback:

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

Modifier

En me basant sur la réponse de pankajparkar, comme je l’ai dit, je pense que vous devriez éviter de remplacer un nom de paramètre existant. ui-router a déployé beaucoup d'efforts pour faire la distinction entre les états et les url, donc utiliser à la fois url et externalUrl pourrait être utile ...

Donc, je mettrais en œuvre un param externalUrl comme suit:

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 utilisez-le comme suit, avec ou sans URL interne:

$stateProvider.state('external', {
    // option url for sref
    // url: '/to-google',
    externalUrl: 'http://www.google.com'
});
25
rixo

Comme mentionné dans le comportement du lien angular.js - désactivez la liaison en profondeur pour des URL spécifiques 

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

cela désactivera le routage angularJS sur un lien spécifique souhaité.

9
Ebrahim

J'ai transformé la réponse acceptée en réponse reposant sur la dernière version d'AngularJS (actuellement 1.6), ui-router 1.x , Webpack 2 avec Babel transpilation et le plugin ng-annotate de 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'
    })
})

Usage:

<a ui-sref="there">To Google</a>
0
Christiaan Westerbeek