Comment rediriger vers une URL externe dans Angular2?

Quelle est la méthode pour rediriger l'utilisateur vers une URL complètement externe dans Angular 2. Par exemple, si je dois rediriger l'utilisateur vers un serveur OAuth2 afin de s'authentifier, comment le ferais-je?

Location.go(), Router.navigate()et Router.navigateByUrl()sont-ils bien pour envoyer l'utilisateur vers une autre section (route) dans l'application Angular 2, mais je ne vois pas comment ils pourraient être utilisés pour rediriger vers un site externe?

Vous pouvez utiliser ceci-> window.location.href = '...';

Cela changerait la page en ce que vous voulez.

Une approche angulaire des méthodes précédemment décrites consiste à importer DOCUMENTdepuis @angular/common(ou @angular/platform-browserdans Angular <4) et à utiliser

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

à l'intérieur d'une fonction.

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>

Consultez le référentiel de plateformBrowser pour plus d'informations.

La solution , comme l'a dit Dennis Smolek, est extrêmement simple. Définissez window.location.hrefl'URL vers laquelle vous souhaitez basculer et cela fonctionne.

Par exemple, si vous aviez cette méthode dans le fichier de classe de votre composant (contrôleur):

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

Ensuite, vous pouvez l'appeler tout simplement avec l' (click)appel approprié sur un bouton (ou autre) dans votre modèle:

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

Je pense que vous avez besoin d'un target = "_ blank" , alors vous pouvez utiliser window.open:

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

Si vous avez utilisé le hook de cycle de vie OnDestry, vous pourriez être intéressé à utiliser quelque chose comme celui-ci avant d'appeler window.location.href = ...

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

qui déclenchera le rappel OnDestry dans votre composant que vous pourriez aimer.

Ohh, et aussi:

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

est l'endroit où vous trouvez le routeur.

--- EDIT --- Malheureusement, je me suis peut-être trompé dans l'exemple ci-dessus. Au moins, cela ne fonctionne pas comme prévu dans mon code de production pour le moment - donc, jusqu'à ce que j'aie le temps d'enquêter plus avant, je le résous comme ça (puisque mon application a vraiment besoin du hook lorsque c'est possible)

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

En gros, routage vers n'importe quelle route (factice) pour forcer le hook, puis naviguez comme demandé.

dans les nouvelles versions de Angular avec fenêtre en tant que any

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

Après m'être arraché la tête, la solution est simplement d'ajouter http: // à href.

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

J'ai utilisé window.location.href = ' http: // external-url ';

Pour moi, les redirections fonctionnaient dans Chrome, mais ne fonctionnaient pas dans Firefox. Le code suivant a résolu mon problème:

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

Je l'ai fait en utilisant Angular 2 Location car je ne voulais pas manipuler moi-même l'objet de la fenêtre globale.

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

Cela peut être fait comme ceci:

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

Aucune des solutions ci-dessus n'a fonctionné pour moi, je viens d'ajouter

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

Cela a fonctionné pour moi.

Ou essayez d'utiliser

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

Dans votre 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';
  }
}

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