¿Cómo redirigir a una URL externa en Angular2?

175

¿Cuál es el método para redirigir al usuario a una URL completamente externa en Angular 2. Por ejemplo, si necesito redirigir al usuario a un servidor OAuth2 para autenticarme, ¿cómo lo haría?

Location.go(), Router.navigate()y Router.navigateByUrl()están bien para enviar al usuario a otra sección (ruta) dentro de la aplicación Angular 2, pero no puedo ver cómo podrían usarse para redirigir a un sitio externo.

Michael Oryl
fuente
44
¿No le parece ridículo que esto no se haga fácilmente? Tiene que haber una manera más simple de hacer esto, sin tener que codificarlo.
Maccurt el
44
Nota: Si su URL externa no contiene http: // o https: //, Angular 4 tratará la URL como una ruta interna. En caso de que alguien más esté luchando con eso.
aherocalledFrog

Respuestas:

216

Puedes usar esto-> window.location.href = '...';

Esto cambiaría la página a lo que quieras.

Dennis Smolek
fuente
3
Ugh, intenté llamarlo como una función por alguna razón en lugar de simplemente cambiar el valor. Establecer el valor funciona directamente.
Michael Oryl
9
Solo recuerde que hacer referencia directa a la ventana limitará su código a plataformas con un objeto de ventana.
ender
2
@ender ¿no hay una alternativa? Puede haber escenarios en los que realmente queremos redirigir a enlaces externos. Claro, podemos usar window.location.href, pero como usted dice, tiene sus desventajas. Si hay una API compatible en Angular, eso ayudaría mejor.
Krishnan
1
Claro, pero ese es el 99% de todas las plataformas que ejecutan JavaScript y necesitan hacer una redirección de página. Incluso los fantasmas / casperJs respetan el objeto de la ventana. Puede llamar document.location.hrefo incluso Location.hrefya que todos se refieren al mismo objeto. Referencia de ubicación
Dennis Smolek
2
@DennisSmolek Pero si intentas compilar esto en una aplicación de Android usando Universal, ¿no fallaría este comportamiento?
finaliza
124

Un enfoque angular de los métodos descritos anteriormente es importar DOCUMENTdesde @angular/common(o @angular/platform-browseren Angular <4) y usar

document.location.href = 'https://stackoverflow.com';

dentro de una función.

some-page.component.ts

import { DOCUMENT } from '@angular/common';
...
constructor(@Inject(DOCUMENT) private document: Document) { }

goToUrl(): void {
    this.document.location.href = 'https://stackoverflow.com';
}

some-page.component.html

<button type="button" (click)="goToUrl()">Click me!</button>

Consulte el repositorio de plateformBrowser para obtener más información.

Brian
fuente
Haría el know sitio de destino que la solicitud proviene de nuestra aplicación, ya que el requisito aquí es redirigir con fines de inicio de sesión y por lo tanto la aplicación de SSO debe redirigir de nuevo a nuestra aplicación después del éxito
NitinSingh
55
En angular 4, el DOCUMENTO debe importarse desde @angular/common(es decir import { DOCUMENT } from '@angular/common';), pero de lo contrario, ¡esto funciona muy bien! Ver github.com/angular/angular/blob/master/packages/…
John
44
¿Cuál es el propósito de inyectar el documento de esta manera@Inject(DOCUMENT) private document: any
Sunil Garg
1
@SunilGarg Injecting DOCUMENThace que sea más fácil reemplazar el objeto del documento con un simulacro en las pruebas unitarias. También permite una implementación alternativa para ser utilizada en otras plataformas (servidor / móvil).
eppsilon
3
Para escribir estrictamente utilizo,constructor(@Inject(DOCUMENT) private document: Document) { }
Ian Jamieson
38

La solución , como dijo Dennis Smolek, es muy simple. Establezca window.location.hrefla URL a la que desea cambiar y simplemente funciona.

Por ejemplo, si tenía este método en el archivo de clase de su componente (controlador):

goCNN() {
    window.location.href='http://www.cnn.com/';
}

Entonces podría llamarlo simplemente con la (click)llamada apropiada en un botón (o lo que sea) en su plantilla:

<button (click)="goCNN()">Go to CNN</button>
Michael Oryl
fuente
21

Creo que necesitas à target = "_ blank" , entonces puedes usar window.open:

gotoGoogle() : void {
     window.open("https://www.google.com", "_blank");
}
abahet
fuente
10

Si ha estado utilizando el enlace del ciclo de vida de OnDestry, puede estar interesado en usar algo como esto antes de llamar a window.location.href = ...

    this.router.ngOnDestroy();
    window.location.href = 'http://www.cnn.com/';

eso activará la devolución de llamada OnDestry en su componente que le pueda gustar.

Ohh, y también

import { Router } from '@angular/router';

es donde encuentras el enrutador.

--- EDITAR --- Lamentablemente, podría haber estado equivocado en el ejemplo anterior. Al menos no está funcionando como se esperaba en mi código de producción en este momento, así que, hasta que tenga tiempo para investigar más, lo resuelvo así (ya que mi aplicación realmente necesita el gancho cuando sea posible)

this.router.navigate(["/"]).then(result=>{window.location.href = 'http://www.cnn.com/';});

Básicamente enrutamiento a cualquier ruta (ficticia) para forzar el gancho, y luego navegar según lo solicitado.

Henry Arousell
fuente
6

en versiones más nuevas de Angular con ventana como any

(window as any).open(someUrl, "_blank");
usuario738048
fuente
la mejor respuesta
Victor Bredihin
¿Las versiones más recientes en Angular no permiten solo una ventana simple?
Justin
3

Después de arrancarme la cabeza, la solución es simplemente agregar http: // a href.

<a href="http://www.URL.com">Go somewhere</a>
Joel
fuente
44
¿Qué pregunta respondes con eso?
Guido Flohr
2

Usé window.location.href = ' http: // external-url ';

Para mí, las redirecciones funcionaron en Chrome, pero no funcionaron en Firefox. El siguiente código resolvió mi problema:

window.location.assign('http://external-url');
Laura Chesches
fuente
1

Lo hice usando Angular 2 Location ya que no quería manipular el objeto de la ventana global.

https://angular.io/docs/ts/latest/api/common/index/Location-class.html#!#prepareExternalUrl-anchor

Se puede hacer así:

import {Component} from '@angular/core';
import {Location} from '@angular/common';
@Component({selector: 'app-component'})
class AppCmp {
  constructor(location: Location) {
    location.go('/foo');
  }
}
user3220080
fuente
1
Para mí, esto solo cambia la URL y el estado de la aplicación no cambia (la ruta real se ve igual). Incluso 'location.replaceState (' / ') no actuó como esperaba. router.navigate(['/']);es lo que hizo por mi
Matt Rowles el
2
Angular 2 Location no parece aplicable. Los documentos indican que el propósito de la ubicación es: "La ubicación es responsable de normalizar la URL contra la base href de la aplicación". Usar esto para redirigir a una URL dentro de la aplicación puede ser apropiado; usarlo para redirigir a una URL externa no parece encajar con los documentos.
J. Fritz Barnes
1

Ninguna de las soluciones anteriores funcionó para mí, acabo de agregar

window.location.href = "www.google.com"
event.preventDefault();

Esto funcionó para mí.

O intente usar

window.location.replace("www.google.com");
Rishi0405
fuente
0

En su component.ts

import { Component } from '@angular/core';

@Component({
  ...
})
export class AppComponent {
  ...
  goToSpecificUrl(url): void {
    window.location.href=url;
  }

  gotoGoogle() : void {
    window.location.href='https://www.google.com';
  }
}

En su componente.html

<button type="button" (click)="goToSpecificUrl('http://stackoverflow.com/')">Open URL</button>
<button type="button" (click)="gotoGoogle()">Open Google</button>

<li *ngFor="item of itemList" (click)="goToSpecificUrl(item.link)"> // (click) don't enable pointer when we hover so we should enable it by using css like: **cursor: pointer;**
Phan Van Linh
fuente