¿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 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.

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

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

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.

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>

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

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

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.

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

(window as any).open(someUrl, "_blank");

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

<a href="http://www.URL.com">Go somewhere</a>

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

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

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

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;**