85 votes

Angular 2 - Rediriger vers une URL externe et ouvrir dans un nouvel onglet

J'essaie d'ouvrir une nouvelle page lorsque l'utilisateur clique sur un lien. Je ne peux pas utiliser Angular 2 Router, car il n'a pas de fonctionnalités pour rediriger vers une URL externe.

J'utilise donc window.location.href="..." ;

code html :

<button (click)="onNavigate()">Google</tn-submenu-link>

le code dactylographié :

onNavigate(){
        //this.router.navigateByUrl("https://www.google.com");
        window.location.href="https://www.google.com";
    }

Mais comment puis-je l'ouvrir dans un nouvel onglet ? en utilisant window.location.href ?

3 votes

Si vous pouvez réduire le problème à l'utilisation de Javascript, il s'agit d'une question sur Javascript et non sur Angular2. Pouvez-vous appliquer cette solution stackoverflow.com/questions/19851782/ ?

0 votes

@HarryNinh Angular 2 et 4 n'exposent pas la fonction window à l'intérieur d'un composant (alors que vous pouvez vous en sortir en utilisant l'objet window global, il est préférable d'effectuer des tâches spécifiques à la plateforme (comme l'utilisation de la fonction window qui diffère selon les navigateurs) en utilisant un service Angular.

140voto

Martin Ocando Points 890
onNavigate(){
    window.open("https://www.google.com", "_blank");
}

10 votes

Chrome bloque les popups lorsque j'utilise cette méthode. Avez-vous une solution à ce problème ?

3 votes

@sunnyiitkgp window.open() doit être appelé au sein d'un callback déclenché par une action de l'utilisateur (exemple : onclick).

2 votes

@gokcand c'est évident, mais cela ne change pas la situation car le blocage se fait toujours comme mentionné ci-dessus.

35voto

SaoBiz Points 819

Une mise en garde sur l'utilisation window.open() c'est que si l'url que vous lui passez n'a pas http:// ou https:// devant elle, angular la traite comme une route.

Pour contourner cela, testez si l'url commence par http:// ou https:// et l'ajouter si ce n'est pas le cas.

let url: string = '';
if (!/^http[s]?:\/\//.test(this.urlToOpen)) {
    url += 'http://';
}

url += this.urlToOpen;
window.open(url, '_blank');

0 votes

J'ai cherché cette solution de temps en temps pendant une semaine. Dans Angular 4, cela fonctionne pour moi comme une solution à court terme : <a href="https://{{url}">, alors qu'il était traité comme une route auparavant. Merci !

0 votes

Cant // suffisent ? par exemple window.open(``//${this.urlToOpen}``, '_blank')

9voto

dddenis Points 150

Une autre solution possible est :

const link = document.createElement('a');
link.target = '_blank';
link.href = 'https://www.google.es';
link.setAttribute('visibility', 'hidden');
link.click();

2 votes

Cette méthode ouvre le lien dans un nouvel onglet. "window.open(url, '_blank') ; " ouvre une fenêtre popup qui est normalement bloquée par Chrome.

5voto

Mile Mijatovic Points 1101

Je veux partager avec vous une autre solution si vous avez une partie absolue dans l'URL.

Solution SharePoint avec ${_spPageContextInfo.webAbsoluteUrl}

HTML :

<button (click)="onNavigate()">Google</button>

TypeScript :

onNavigate()
{
    let link = `${_spPageContextInfo.webAbsoluteUrl}/SiteAssets/Pages/help.aspx#/help`;
    window.open(link, "_blank");
}

et l'url s'ouvrira dans un nouvel onglet.

5voto

Irrfan23 Points 62

Vous pouvez faire comme ceci dans votre code typographique

onNavigate(){
var location="https://google.com",
}

Dans votre code html, ajoutez une balise d'ancrage et passez cette variable (emplacement).

<a href="{{location}}" target="_blank">Redirect Location</a>

Supposons que vous ayez une url comme celle-ci www.google.com sans http et que vous n'êtes pas redirigé vers l'url donnée, alors ajoutez http:// à la location comme ceci

var location = 'http://'+ www.google.com

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X