page - angular route redirect external url

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

Question

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

Answer 1

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

window.location.assign(''http://external-url'');

Answer 2

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://.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;**

Answer 3

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

Answer 4

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

Answer 5

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

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

Answer 6

Si ha estado utilizando el enlace del ciclo de vida de OnDestry, puede estar interesado en utilizar 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 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.

Answer 7

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

document.location.href = ''https://.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://.com'';
}

some-page.component.html

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

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

Answer 8

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:

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

Answer 9

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

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

Answer 10

La solución , como dijo Dennis Smolek, es muy simple. Establezca window.location.href en la 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 llamada apropiada (click) en un botón (o lo que sea) en su plantilla:

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

Answer 11

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

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