Como redirecionar para um URL externo no Angular2?

175

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?

Michael Oryl
fonte
4
Você não acha ridículo que isso não seja feito com facilidade? Tem que haver uma maneira mais simples de fazer isso, sem ter que codificar para isso.
Maccurt 23/01/18
4
Nota: Se o seu URL externo não contiver http: // ou https: //, o Angular 4 tratará o URL como uma rota interna. Caso alguém mais esteja lutando com isso.
precisa saber é o seguinte

Respostas:

216

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

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

Dennis Smolek
fonte
3
Ugh, tentei chamá-lo como uma função por algum motivo, em vez de apenas alterar o valor. Definir o valor diretamente funciona.
Michael Oryl
9
Lembre-se de que referenciar diretamente a janela limitará seu código a plataformas com um objeto de janela.
ender
2
@ender não existe uma alternativa para isso? Pode haver situações em que realmente queremos redirecionar para links externos. Claro, podemos usar window.location.href, mas como você diz, ele tem suas desvantagens. Se houver uma API suportada no Angular, isso ajudaria melhor.
Krishnan
1
Claro, mas isso é 99% de todas as plataformas que executam javascript e precisam fazer um redirecionamento de página. Até fantasmas / casperJs respeitam o objeto da janela. Você pode chamar document.location.hrefou mesmo Location.hrefcomo todos eles se referem ao mesmo objeto. Referência de local
Dennis Smolek 8/17/17
2
@DennisSmolek Mas se você tentar compilar isso em um aplicativo Android usando Universal, esse comportamento não falhará?
ender
124

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.

Brian
fonte
Será que o site de destino saber que a solicitação é proveniente de nosso aplicativo, desde a exigência aqui é para redirecionar para fins de login e, portanto, o aplicativo SSO deve redirecionar de volta para nosso aplicativo após o sucesso
NitinSingh
5
No angular 4, DOCUMENT deve ser importado de @angular/common(ie import { DOCUMENT } from '@angular/common';), mas, caso contrário, isso funciona muito bem! Veja github.com/angular/angular/blob/master/packages/…
John
4
qual é a finalidade de injetar documento desta forma@Inject(DOCUMENT) private document: any
Sunil Garg
1
A injeção do @SunilGarg DOCUMENTfacilita a substituição do objeto do documento por uma simulação nos testes de unidade. Ele também permite que uma implementação alternativa seja usada em outras plataformas (servidor / celular).
eppsilon
3
Para digitação estrita que eu uso,constructor(@Inject(DOCUMENT) private document: Document) { }
Ian Jamieson
38

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>
Michael Oryl
fonte
21

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

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

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.

Henry Arousell
fonte
6

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

(window as any).open(someUrl, "_blank");
user738048
fonte
a melhor resposta
Victor Bredihin
As versões mais recentes do Angular não permitem apenas uma janela simples?
Justin
3

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

<a href="http://www.URL.com">Go somewhere</a>
Joel
fonte
4
Que pergunta você responde com isso?
Guido Flohr 28/01
2

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');
Laura Chesches
fonte
1

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');
  }
}
user3220080
fonte
1
Para mim, isso apenas altera o URL e o estado do aplicativo não muda (a rota real parece a mesma). Mesmo 'location.replaceState (' / ') não funcionou como eu esperava. router.navigate(['/']);é o que fez isso por mim.
Matt Rowles
2
A localização angular 2 não parece aplicável. Os documentos afirmam que o objetivo do local é: "O local é responsável por normalizar o URL em relação ao href base do aplicativo". Usar isso para redirecionar para um URL dentro do aplicativo pode ser apropriado; usá-lo para redirecionar para um URL externo não parece se encaixar nos documentos.
J. Fritz Barnes
1

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");
Rishi0405
fonte
0

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;**
Phan Van Linh
fonte