Comment rediriger vers une URL externe dans Angular2?


175

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?


4
Ne trouvez-vous pas ridicule que cela ne soit pas facile? Il doit y avoir un moyen plus simple de le faire, sans avoir à coder pour cela.
Maccurt

4
Remarque: si votre URL externe ne contient pas http: // ou https: //, Angular 4 traitera l'URL comme une route interne. Au cas où quelqu'un d'autre aurait du mal avec ça.
aherocalledFrog

Réponses:


216

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

Cela changerait la page en ce que vous voulez.


3
Ugh, j'ai essayé de l'appeler comme une fonction pour une raison quelconque plutôt que de simplement changer la valeur. La définition de la valeur fonctionne directement.
Michael Oryl

9
N'oubliez pas que le fait de référencer directement la fenêtre limitera votre code aux plates-formes avec un objet window.
ender

2
@ender n'y a-t-il pas d'alternative? Il peut y avoir des scénarios où nous voulons vraiment rediriger vers des liens externes. Bien sûr, nous pouvons utiliser window.location.href, mais comme vous le dites, cela a ses inconvénients. S'il existe une API prise en charge dans Angular, cela aiderait mieux.
Krishnan

1
Bien sûr, mais c'est 99% de toutes les plates-formes qui exécutent javascript et doivent effectuer une redirection de page. Même les phantom / casperJs respectent l'objet window. Vous pouvez appeler document.location.hrefou même Location.hrefcomme ils font tous référence au même objet. Référence de l'emplacement
Dennis Smolek

2
@DennisSmolek Mais si vous essayez de compiler ceci dans une application Android en utilisant Universal, ce comportement n'échouerait-il pas?
ender

124

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.


Le site cible saurait-il que la demande provient de notre application, puisque l'exigence ici est de rediriger à des fins de connexion et que l'application SSO devrait donc être redirigée vers notre application après le succès
NitinSingh

5
Dans angular 4, DOCUMENT doit être importé de @angular/common(ie import { DOCUMENT } from '@angular/common';), mais sinon cela fonctionne très bien! Voir github.com/angular/angular/blob/master/packages/…
John

4
quel est le but d'injecter le document de cette façon@Inject(DOCUMENT) private document: any
Sunil Garg

1
@SunilGarg Injecting DOCUMENTfacilite le remplacement de l'objet document par une maquette dans les tests unitaires. Il permet également d'utiliser une implémentation alternative sur d'autres plateformes (serveur / mobile).
eppsilon

3
Pour le typage strict que j'utilise,constructor(@Inject(DOCUMENT) private document: Document) { }
Ian Jamieson

38

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>

21

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

10

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é.


6

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

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

la meilleure réponse
Victor Bredihin

Les nouvelles versions sur Angular n'autorisent-elles pas la simple fenêtre?
Justin

3

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>

4
À quelle question répondez-vous avec cela?
Guido Flohr le

2

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

1

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

1
Pour moi, cela change simplement l'URL et l'état de l'application ne change pas (la route réelle a la même apparence). Même 'location.replaceState (' / ') n'a pas agi comme prévu. router.navigate(['/']);est ce que cela a fait pour moi.
Matt Rowles

2
L'emplacement angulaire 2 ne semble pas applicable. La documentation indique que le but de l'emplacement est: "L'emplacement est responsable de la normalisation de l'URL par rapport au href de base de l'application." Utiliser ceci pour rediriger vers une URL dans l'application peut être approprié; l'utiliser pour rediriger vers une URL externe ne semble pas correspondre à la documentation.
Barnes

1

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

0

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;**
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.