Wie leite ich in Angular2 zu einer externen URL um?

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?

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

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

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.

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>

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

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

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.

in neueren Versionen von Angular mit Fenster als any

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

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>

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

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

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

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