Come reindirizzare a un URL esterno in Angular2?

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?

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

Questo cambierebbe la pagina come vuoi tu ..

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.

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>

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

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

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.

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

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

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

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

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

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

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

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