web-dev-qa-db-fra.com

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 procéderais-je?

Location.go(), Router.navigate() et Router.navigateByUrl() conviennent parfaitement pour envoyer l'utilisateur à une autre section (route) de l'application Angular 2, mais je ne vois pas comment pourrait être utilisé pour rediriger vers un site externe?

redirectangularangular2-routing
121
Michael Oryl

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

Cela changerait la page en ce que vous voulez.

163
Dennis Smolek

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

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

à l'intérieur d'une fonction.

une-page.component.ts 

import { DOCUMENT } from '@angular/common';
...
constructor(@Inject(DOCUMENT) private document: Document) { }

goToUrl(): void {
    this.document.location.href = 'https://stackoverflow.com';
}

une-page.component.html 

<button type="button" (click)="goToUrl()">Click me!</button>

Découvrez le plateformBrowser repo pour plus d'informations.

80
Brian

La solution , comme l'a dit Dennis Smolek, est extrêmement simple. Définissez window.location.href sur l'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/';
}

Vous pouvez ensuite l'appeler simplement avec l'appel (click) approprié sur un bouton (ou autre) de votre modèle:

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

Je pense que vous avez besoin de target = "_ blank", vous pouvez donc utiliser window.open:

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

Si vous avez utilisé le hook de cycle de vie OnDestry, vous pouvez utiliser quelque chose comme ceci avant d'appeler window.location.href = ...

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

cela déclenchera le rappel OnDestry dans votre composant qui pourrait vous intéresser.

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 - alors, jusqu'à ce que j'ai le temps d'enquêter plus avant, je le résous comme ceci (car mon application a vraiment besoin du crochet lorsque cela est possible)

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

Fondamentalement, acheminez vers une route (fictive) pour forcer le raccordement, puis naviguez à la demande.

8
Henry Arousell

dans les versions plus récentes de Angular avec une fenêtre en tant que any

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

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

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

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

Après avoir déchiré ma tête, la solution consiste simplement à ajouter http: // to href.

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

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

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

Cela peut être fait comme ça:

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

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.

0
Rishi0405

Dans votre composant.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 composant.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;**
0
Phan Van Linh