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

Question

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 ?

Answer 1

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

Answer 2

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');

Answer 3

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

Answer 4

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.

Answer 5

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