Comment aurais-je ui-router aller à un lien externe, tels que google.com?
par exemple:
$stateProvider
.state('external', {
url: 'http://www.google.com',
})
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.
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');
}
});
})
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é.
, 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'
});
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.
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>