Pesquisa de site

typescript - Angular 2 - Redirecionar para uma URL externa e abrir em uma nova aba

Estou tentando abrir uma nova página quando o usuário clica em um link. Não posso usar o Angular 2 Router, porque ele não possui funcionalidades para redirecionar para uma URL externa.

então, estou usando window.location.href="...";

código html:

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

código TypeScript:

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

Mas como posso abri-lo em uma nova aba? quando usando window.location.href?

Resposta #1

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

Resposta #2

Um aviso ao usar window.open() é que, se a URL que você passar para ele não tiver http:// ou https:// na frente, o Angular a trata como uma rota.

Para contornar isso, teste se a URL começa com http:// ou https:// e adicione-a se não começar.

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

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

Resposta #3

em HTML:

<a class="main-item" (click)="onNavigate()">Go to URL</a>

OU

<button class="main-item" (click)="onNavigate()">Go to URL</button>

no arquivo TS:

onNavigate(){
    // your logic here.... like set the url 
    const url = 'https://www.google.com';
    window.open(url, '_blank');
}

Resposta #4

Outra solução possível é:

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

Artigos relacionados