Come reindirizzare a un URL esterno in Angular2?


175

Qual è il metodo per reindirizzare l'utente a un URL completamente esterno in Angolare 2. Ad esempio, se devo reindirizzare l'utente su un server OAuth2 per autenticarmi, come lo farei?

Location.go(), Router.navigate()e Router.navigateByUrl()vanno bene per l'invio dell'utente a un'altra sezione (percorso) all'interno dell'app Angular 2, ma non riesco a vedere come potrebbero essere utilizzati per reindirizzare a un sito esterno?


4
Non trovi ridicolo che ciò non sia facile? Deve esserci un modo più semplice per farlo, senza doverlo programmare.
Maccurt,

4
Nota: se l'URL esterno non contiene http: // o https: //, Angular 4 considererà l'URL come un percorso interno. Nel caso in cui qualcun altro stia lottando con questo.
aherocalledFrog

Risposte:


216

Puoi usare questo-> window.location.href = '...';

Questo cambierebbe la pagina come vuoi tu ..


3
Ugh, ho provato a chiamarlo come una funzione per qualche motivo piuttosto che cambiare il valore. L'impostazione del valore funziona direttamente.
Michael Oryl,

9
Ricorda solo che il riferimento diretto alla finestra limiterà il tuo codice alle piattaforme con un oggetto finestra.
terminato il

2
@ender non c'è alternativa ad esso? Potrebbero esserci scenari in cui vogliamo veramente reindirizzare a collegamenti esterni. Certo, possiamo usare window.location.href, ma come dici tu, ha i suoi svantaggi. Se esiste un'API supportata in Angular, ciò aiuterebbe meglio.
Krishnan,

1
Certo, ma questo è il 99% di tutte le piattaforme che eseguono javascript e devono eseguire un reindirizzamento della pagina. Anche phantom / casperJs rispettano l'oggetto finestra. Puoi chiamare document.location.hrefo anche Location.hrefquando si riferiscono tutti allo stesso oggetto. Riferimento posizione
Dennis Smolek,

2
@DennisSmolek Ma se provassi a compilarlo in un'app Android usando Universal, questo comportamento non fallirebbe?
terminerà

124

Un approccio angolare ai metodi precedentemente descritti consiste nell'importare DOCUMENTda @angular/common(o @angular/platform-browserin angolare <4) e utilizzarlo

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

all'interno di una funzione.

alcuni-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>

Controlla il repository plateformBrowser per maggiori informazioni.


Il sito target saprebbe che la richiesta proviene dalla nostra app, poiché il requisito qui è reindirizzare a scopo di accesso e quindi l'app SSO dovrebbe reindirizzare nuovamente alla nostra app dopo il successo
NitinSingh

5
In angolare 4, DOCUMENT dovrebbe essere importato da @angular/common(cioè import { DOCUMENT } from '@angular/common';), ma per il resto funziona alla grande! Vedi github.com/angular/angular/blob/master/packages/…
John,

4
qual è lo scopo di iniettare il documento in questo modo@Inject(DOCUMENT) private document: any
Sunil Garg,

1
@SunilGarg Injecting DOCUMENTsemplifica la sostituzione dell'oggetto documento con una simulazione nei test unitari. Inoltre, consente di utilizzare un'implementazione alternativa su altre piattaforme (server / mobile).
eppsilon,

3
Per la tipizzazione rigorosa che uso,constructor(@Inject(DOCUMENT) private document: Document) { }
Ian Jamieson

38

La soluzione , come diceva Dennis Smolek, è semplicissima. Impostare window.location.hrefsull'URL che si desidera passare e funziona.

Ad esempio, se avevi questo metodo nel file di classe (controller) del tuo componente:

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

Quindi potresti chiamarlo semplicemente con la (click)chiamata appropriata su un pulsante (o qualsiasi altra cosa) nel tuo modello:

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

21

Penso che tu abbia bisogno di à target = "_ blank" , quindi puoi usare window.open:

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

10

Se hai utilizzato l'hook del ciclo di vita di OnDestry, potresti essere interessato a utilizzare qualcosa di simile prima di chiamare window.location.href = ...

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

che attiverà il callback OnDestry nel componente che potrebbe piacerti.

Ohh, e anche:

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

è dove trovi il router.

--- EDIT --- Purtroppo, avrei potuto sbagliarmi nell'esempio sopra. Almeno non funziona come previsto nel mio codice di produzione in questo momento - quindi, fino a quando non avrò il tempo di indagare ulteriormente, lo risolvo in questo modo (poiché la mia app ha davvero bisogno dell'hook quando possibile)

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

Fondamentalmente instradare verso qualsiasi percorso (fittizio) per forzare l'hook, quindi navigare come richiesto.


6

nelle versioni più recenti di Angular con finestra come an any

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

la migliore risposta
Victor Bredihin,

Le versioni più recenti su Angular non consentono solo la finestra normale?
Justin

3

Dopo avermi strappato la testa, la soluzione è solo aggiungere http: // a href.

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

4
A quale domanda rispondi con quello?
Guido Flohr,

2

Ho usato window.location.href = ' http: // external-url ';

Per me i reindirizzamenti hanno funzionato in Chrome, ma non in Firefox. Il seguente codice ha risolto il mio problema:

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

1

L'ho fatto usando Angular 2 Location poiché non volevo manipolare l'oggetto finestra globale da solo.

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

Si può fare così:

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

1
Per me, questo cambia solo l'URL e lo stato dell'app non cambia (il percorso effettivo sembra lo stesso). Anche 'location.replaceState (' / ') non ha funzionato come mi aspettavo. router.navigate(['/']);è quello che ha fatto per me.
Matt Rowles,

2
La posizione angolare 2 non sembra applicabile. I documenti affermano che lo scopo della posizione è: "La posizione è responsabile della normalizzazione dell'URL rispetto all'href di base dell'applicazione". L'uso di questo per reindirizzare a un URL all'interno dell'applicazione può essere appropriato; usarlo per reindirizzare a un URL esterno non sembra adattarsi ai documenti.
J. Fritz Barnes,

1

Nessuna delle soluzioni di cui sopra ha funzionato per me, ho appena aggiunto

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

Questo ha funzionato per me.

Oppure prova a usare

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

0

Nel tuo 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';
  }
}

Nel tuo 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;**
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.