Como redirecionar para um URL externo no Angular2?

Qual é o método para redirecionar o usuário para um URL completamente externo no Angular 2. Por exemplo, se eu precisar redirecionar o usuário para um servidor OAuth2 para autenticar, como faria isso?

Location.go(),, Router.navigate()e Router.navigateByUrl()são adequados para enviar o usuário para outra seção (rota) no aplicativo Angular 2, mas não consigo ver como eles poderiam ser usados ​​para redirecionar para um site externo?

Você pode usar isso-> window.location.href = '...';

Isso mudaria a página para o que você quiser ..

Uma abordagem angular aos métodos descritos anteriormente é importar DOCUMENTde @angular/common(ou @angular/platform-browserem Angular <4) e usar

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

dentro de uma função.

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>

Confira o repo plateformBrowser para obter mais informações.

A solução , como disse Dennis Smolek, é absolutamente simples. Defina window.location.hrefpara o URL para o qual você deseja alternar e simplesmente funciona.

Por exemplo, se você tivesse esse método no arquivo de classe (controlador) do seu componente:

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

Em seguida, você pode chamá-lo simplesmente com a (click)chamada apropriada em um botão (ou o que seja) no seu modelo:

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

Eu acho que você precisa à target = "_ blank" , então você pode usar window.open:

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

Se você usa o gancho de ciclo de vida OnDestry, pode estar interessado em usar algo assim antes de chamar window.location.href = ...

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

que acionará o retorno de chamada OnDestry no seu componente que você pode gostar.

Ohh, e também:

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

é onde você encontra o roteador.

--- EDIT --- Infelizmente, eu posso estar errado no exemplo acima. Pelo menos, não está funcionando como o esperado no meu código de produção no momento - então, até que eu tenha tempo para investigar mais, eu o resolvo assim (já que meu aplicativo realmente precisa do gancho, quando possível)

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

Roteamento básico para qualquer rota (fictícia) para forçar o gancho e, em seguida, navegue conforme solicitado.

nas versões mais recentes do Angular com a janela como um any

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

Depois de arrancar minha cabeça, a solução é apenas adicionar http: // ao href.

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

Eu usei window.location.href = ' http: // external-url ';

Para mim, os redirecionamentos funcionaram no Chrome, mas não no Firefox. O código a seguir resolveu meu problema:

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

Fiz isso usando o Angular 2 Location, já que não queria manipular o objeto de janela global.

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

Isso pode ser feito assim:

import {Component} from '@angular/core';
import {Location} from '@angular/common';
@Component({selector: 'app-component'})
class AppCmp {
  constructor(location: Location) {
    location.go('/foo');
  }
}

Nenhuma das soluções acima funcionou para mim, acabei de adicionar

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

Isso funcionou para mim.

Ou tente usar

window.location.replace("www.google.com");

No seu 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';
  }
}

No seu component.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;**