Wie leite ich in Angular2 zu einer externen URL um?

173

Wie kann ich den Benutzer in Angular 2 zu einer vollständig externen URL umleiten? Wenn ich ihn beispielsweise zur Authentifizierung auf einen OAuth2-Server umleiten muss, wie würde ich das tun?

Location.go(), Router.navigate()Und Router.navigateByUrl()sind in Ordnung für den Benutzer zu einem anderen Abschnitt (Strecke) innerhalb der Angular 2 App senden, aber ich kann nicht sehen , wie sie verwendet werden könnte , auf eine externe Seite zu umleiten?

Michael Oryl
quelle
4
Finden Sie es nicht lächerlich, dass dies nicht einfach ist? Es muss einen einfacheren Weg geben, dies zu tun, ohne dafür codieren zu müssen.
Maccurt
3
Hinweis: Wenn Ihre externe URL kein http: // oder https: // enthält, behandelt Angular 4 die URL als interne Route. Für den Fall, dass jemand anderes damit zu kämpfen hat.
AherocalledFrog

Antworten:

214

Sie können dies-> verwenden window.location.href = '...';

Dies würde die Seite auf das ändern, was Sie wollen.

Dennis Smolek
quelle
3
Ugh, ich habe aus irgendeinem Grund versucht, es als Funktion aufzurufen, anstatt nur den Wert zu ändern. Das Einstellen des Wertes funktioniert direkt.
Michael Oryl
9
Denken Sie daran, dass ein direkter Verweis auf das Fenster Ihren Code auf Plattformen mit einem Fensterobjekt beschränkt.
Ender
2
@ender gibt es keine Alternative dazu? Es kann Szenarien geben, in denen wir wirklich zu externen Links umleiten möchten. Sicher, wir können window.location.href verwenden, aber wie Sie sagen, hat es seine Nachteile. Wenn es in Angular eine unterstützte API gibt, hilft dies besser.
Krishnan
1
Sicher, aber das sind 99% aller Plattformen, auf denen Javascript ausgeführt wird und die eine Seitenumleitung durchführen müssen. Sogar Phantom / CasperJs respektieren das Fensterobjekt. Sie können aufrufen document.location.hrefoder sogar, Location.hrefda sich alle auf dasselbe Objekt beziehen. Standortreferenz
Dennis Smolek
2
@DennisSmolek Aber wenn Sie versuchen, dies mit Universal in eine Android-App zu kompilieren, würde dieses Verhalten dann nicht fehlschlagen?
Ender
124

Ein Angular-Ansatz für die zuvor beschriebenen Methoden ist der Import DOCUMENTaus@angular/common (oder @angular/platform-browserin Angular <4) und zu verwenden

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

innerhalb einer Funktion.

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>

Weitere Informationen finden Sie im PlattenformBrowser- Repo.

Brian
quelle
Würde die Zielwebsite wissen, dass die Anfrage von unserer App kommt, da die Anforderung hier darin besteht, zu
Anmeldezwecken
5
In Winkel 4 sollte DOKUMENT aus @angular/common(dh import { DOCUMENT } from '@angular/common';) importiert werden , aber ansonsten funktioniert dies hervorragend! Siehe github.com/angular/angular/blob/master/packages/…
John
4
Was ist der Zweck der Injektion von Dokumenten auf diese Weise@Inject(DOCUMENT) private document: any
Sunil Garg
1
@SunilGarg Injecting DOCUMENTerleichtert das Ersetzen des Dokumentobjekts durch ein Modell in Komponententests . Es ermöglicht auch die Verwendung einer alternativen Implementierung auf anderen Plattformen (Server / Mobil).
Eppsilon
3
Für strikte Eingabe benutze ichconstructor(@Inject(DOCUMENT) private document: Document) { }
Ian Jamieson
38

Die Lösung ist , wie Dennis Smolek sagte, denkbar einfach. einstellenwindow.location.href Sie auf die URL möchten Sie Schalter auf und es funktioniert einfach.

Wenn Sie diese Methode beispielsweise in der Klassendatei (Controller) Ihrer Komponente hatten:

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

Dann können Sie es ganz einfach mit dem entsprechenden (click)Aufruf auf einer Schaltfläche (oder was auch immer) in Ihrer Vorlage aufrufen:

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

Ich denke, Sie brauchen à target = "_ blank" , damit Sie Folgendes verwenden können window.open:

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

Wenn Sie den OnDestry-Lebenszyklus-Hook verwendet haben, könnten Sie daran interessiert sein, so etwas zu verwenden, bevor Sie window.location.href = ... aufrufen.

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

Dadurch wird der OnDestry-Rückruf in Ihrer Komponente ausgelöst, der Ihnen möglicherweise gefällt.

Ohh und auch:

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

Hier finden Sie den Router.

--- EDIT --- Leider habe ich mich im obigen Beispiel möglicherweise geirrt. Zumindest funktioniert es momentan nicht wie erwartet in meinem Produktionscode. Bis ich Zeit habe, weitere Nachforschungen anzustellen, löse ich es so (da meine App den Haken wirklich braucht, wenn es möglich ist).

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

Grundsätzlich Routing zu einer beliebigen (Dummy-) Route, um den Hook zu erzwingen, und dann wie gewünscht navigieren.

Henry Arousell
quelle
6

in neueren Versionen von Angular mit Fenster als any

(window as any).open(someUrl, "_blank");
user738048
quelle
die beste Antwort
Victor Bredihin
Erlauben neuere Versionen von Angular nicht nur ein einfaches Fenster?
Justin
3

Nachdem ich mir den Kopf abgerissen habe, besteht die Lösung darin, http: // zu href hinzuzufügen.

<a href="http://www.URL.com">Go somewhere</a>
Joel
quelle
4
Welche Frage beantworten Sie damit?
Guido Flohr
2

Ich habe window.location.href = ' http: // external-url ' verwendet.

Für mich funktionierten die Weiterleitungen in Chrome, aber nicht in Firefox. Der folgende Code hat mein Problem behoben:

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

Ich habe es mit Angular 2 Location gemacht, da ich das globale Fensterobjekt nicht selbst manipulieren wollte.

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

Es kann so gemacht werden:

import {Component} from '@angular/core';
import {Location} from '@angular/common';
@Component({selector: 'app-component'})
class AppCmp {
  constructor(location: Location) {
    location.go('/foo');
  }
}
user3220080
quelle
1
Für mich ändert dies nur die URL und der App-Status ändert sich nicht (die tatsächliche Route sieht gleich aus). Selbst 'location.replaceState (' / ') hat nicht wie erwartet funktioniert. router.navigate(['/']);hat es für mich getan.
Matt Rowles
2
Angular 2 Location klingt nicht zutreffend. In den Dokumenten wird angegeben, dass der Zweck des Speicherorts lautet: "Der Standort ist für die Normalisierung der URL anhand der Basis-HREF der Anwendung verantwortlich." Die Verwendung dieser Option zum Umleiten zu einer URL in der Anwendung kann angemessen sein. Die Verwendung zum Umleiten zu einer externen URL scheint nicht zu Dokumenten zu passen.
J. Fritz Barnes
1

Keine der oben genannten Lösungen hat bei mir funktioniert, habe ich gerade hinzugefügt

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

Das hat bei mir funktioniert.

Oder versuchen Sie es mit

window.location.replace("www.google.com");
Rishi0405
quelle
0

In Ihrer 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';
  }
}

In Ihrer 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;**
Phan Van Linh
quelle