Come redirect a un URL esterno in Angular2?

Qual è il metodo per redirect l’utente a un URL completamente esterno in Angular 2. Ad esempio, se devo redirect l’utente a un server OAuth2 per l’autenticazione, come faccio?

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

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

Questo cambierebbe la pagina in qualunque cosa tu voglia ..

Un approccio angular ai metodi precedentemente descritti è di importare DOCUMENT da @angular/common (o @angular/platform-browser in Angular <4) e utilizzare

 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: any) { } goToUrl(): void { this.document.location.href = 'https://stackoverflow.com'; } 

some-page.component.html

  

Controlla il repository PlateformBrowser per maggiori informazioni.

La soluzione , come ha detto Dennis Smolek, è semplice. Imposta window.location.href sull’URL a cui vuoi passare e funziona.

Ad esempio, se si dispone di questo metodo nel file di class del componente (controller):

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

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

  

Se hai utilizzato l’hook del ciclo di vita 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, potrei aver sbagliato nell’esempio sopra. Almeno non sta funzionando come previsto nel mio codice di produzione in questo momento – quindi, finché non avrò il tempo di indagare ulteriormente, lo risolvo in questo modo (dal momento che la mia app ha davvero bisogno del hook quando ansible)

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

In pratica, effettuare il routing su qualsiasi percorso (fittizio) per forzare l’hook, quindi navigare come richiesto.

Ho bisogno di à target = “_ blank” , puoi usare window.open:

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

L’ho fatto usando Angular 2 Location dal momento che non volevo manipolare me stesso l’object della finestra globale.

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

Può essere fatto in questo modo:

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

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

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

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

Nel tuo componente.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

   
  • // (click) don't enable pointer when we hover so we should enable it by using css like: **cursor: pointer;**
  • Dopo aver strappato la testa, la soluzione è solo per aggiungere http: // a href.

     Go somewhere