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

¿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 autenticarse, ¿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 veo cómo podrían usarse para redirigir a un sitio externo.

Dec 17 '15 22:12 Michael Oryl

Un enfoque angular para 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.

alguna-página.component.ts

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

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

alguna-página.componente.html

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

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

Feb 25 '2017 06:02 Brian

La solución , como dijo Dennis Smolek, es absolutamente sencilla. Establezca window.location.hrefla URL a la que desea cambiar y simplemente funcionará.

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

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

Luego podrías llamarlo de manera muy simple con la (click)llamada apropiada en un botón (o lo que sea) en tu plantilla:

<button (click)="goCNN()">Go to CNN</button>

Dec 17 '2015 18:12 Michael Oryl

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

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

Oct 07 '2017 11:10 abahet

Si ha estado usando el enlace del ciclo de vida de OnDestry, es posible que le interese 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 de OnDestry en su componente que le guste.

Ah, y también:

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

es donde encuentras el enrutador.

---EDITAR--- Lamentablemente, es posible que me haya 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 de investigar más, lo soluciono 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, enrutar a cualquier ruta (ficticia) para forzar el gancho y luego navegar según lo solicitado.

Sep 21 '2016 14:09 Henry Arousell