web-dev-qa-db-fra.com

Angular 2 - Redirection vers une URL externe et ouverture 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 ne dispose d'aucune fonctionnalité permettant de rediriger vers une URL externe.

donc, j'utilise window.location.href = "...";

code HTML:

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

Code TypeScript:

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?

angulartypescript
55
Varun
onNavigate(){
    window.open("https://www.google.com", "_blank");
}
91
Martin Ocando

Un inconvénient à utiliser window.open() est que si l'URL que vous lui transmettez ne comporte pas http:// ou https://, angular le traite comme un route.

Pour contourner ce problème, vérifiez si l'URL commence par http:// ou https:// et ajoutez-la 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');
20
SaoBiz

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();
7
dddenis

Je souhaite partager avec vous une solution supplémentaire si vous avez une part absolue dans l'URL

Solution SharePoint avec ${_spPageContextInfo.webAbsoluteUrl}

HTML:

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

Manuscrit:

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

et l'URL sera ouvert dans un nouvel onglet.

4
Mile Mijatovic

vous pouvez faire comme ça dans votre code TypeScript

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

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

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

Supposons que vous ayez une URL comme ceci www.google.com sans http et que vous ne soyez pas redirigé vers l'URL donnée, puis ajoutez http:// à la location comme ceci

var location = 'http://'+ www.google.com
3
Irrfan23
var url = "https://yourURL.com";
var win = window.open(url, '_blank');
    win.opener = null;
    win.focus();

Cela résoudra le problème, vous n'avez pas besoin d'utiliser DomSanitizer. Son travail pour moi

1
Sarbasish Mishra

nous pouvons utiliser target = blank pour l'ouvrir dans un nouvel onglet

 <a href="https://www.google.co.in/" target="blank">click Here </a>
0
Lijo