80 votos

Angular 2 - Redirigir a una URL externa y abrir en una nueva pestaña

Estoy tratando de abrir una nueva página cuando el usuario hace clic en un enlace. No puedo usar Angular 2 Router, porque no tiene ninguna funcionalidad para redirigir a una URL externa.

Así que, estoy usando window.location.href="...";

código html:

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

código tipográfico:

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

Pero, ¿cómo puedo abrirlo en una nueva pestaña? cuando se utiliza window.location.href ?

3 votos

Si puedes reducirlo a usar Javascript, esto debería ser una pregunta de javascript, no de Angular2. Puedes aplicar esta solución stackoverflow.com/questions/19851782/ ?

0 votos

@HarryNinh Angular 2 y 4 no exponen el window dentro de un componente (mientras que puede salirse con la suya utilizando el window global, es preferible realizar tareas específicas de la plataforma (como usar el window que difiere entre los navegadores) utilizando un servicio de Angular.

129voto

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

10 votos

Chrome bloquea las ventanas emergentes cuando uso este método. ¿Tiene alguna solución para eso?

3 votos

@sunnyiitkgp window.open() debe ser llamado dentro de una llamada de retorno que se desencadena por una acción del usuario (ejemplo onclick).

2 votos

@gokcand es obvio, pero no cambia la situación porque todavía está bloqueado como se mencionó anteriormente.

30voto

SaoBiz Puntos 789

Una advertencia sobre el uso de window.open() es que si la url que le pasas no tiene http:// o https:// delante, Angular lo trata como una ruta.

Para evitarlo, comprueba si la url empieza por http:// o https:// y lo anexa si no lo hace.

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

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

0 votos

Llevo una semana buscando esto de forma intermitente. En Angular 4 esto me funciona como solución a corto plazo: <a href="https://{{url}}">, cuando antes se trataba como una ruta. ¡¡¡Gracias!!!

0 votos

cant // ¿suficiente? p. ej: window.open(``//${this.urlToOpen}``, '_blank')

8voto

dddenis Puntos 150

Otra posible solución es:

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

2 votos

Este método abre el enlace en una nueva pestaña. " window.open(url, '_blank'); " abrir la ventana emergente que normalmente está bloqueada por Chrome

5voto

Irrfan23 Puntos 62

puedes hacer lo siguiente en tu código typescript

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

En tu código html añade una etiqueta de anclaje y pasa esa variable(location)

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

5voto

Mile Mijatovic Puntos 1061

Quiero compartir con vosotros una solución más si tenéis parte absoluta en la URL

Solución SharePoint con ${_spPageContextInfo.webAbsoluteUrl}

HTML:

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

TypeScript:

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

y la url se abrirá en una nueva pestaña.

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X