Jak przekierować na zewnętrzny adres URL w Angular2?

Jaka jest metoda przekierowania użytkownika do całkowicie zewnętrznego adresu URL w Angular 2. Na przykład, jeśli muszę przekierować użytkownika na serwer OAuth2 w celu uwierzytelnienia, jak mam to zrobić?

Location.go(), Router.navigate()i czy Router.navigateByUrl()są w porządku, jeśli chcesz skierować użytkownika do innej sekcji (trasy) w aplikacji Angular 2, ale nie widzę, jak można ich użyć do przekierowania do witryny zewnętrznej?

Możesz użyć tego-> window.location.href = '...';

To zmieniłoby stronę na dowolną.

Angularne podejście do metod opisanych wcześniej polega na importowaniu DOCUMENTz @angular/common(lub @angular/platform-browserw Angular <4) i używaniu

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

wewnątrz funkcji.

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>

Sprawdź repozytorium plateformBrowser, aby uzyskać więcej informacji.

Rozwiązanie , jak powiedział Dennis Smolek, jest banalnie proste. Ustaw window.location.hrefadres URL, na który chcesz się przełączyć i po prostu działa.

Na przykład, jeśli masz tę metodę w pliku klasy komponentu (kontroler):

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

Następnie możesz to nazwać po prostu odpowiednim (click)wywołaniem przycisku (lub czegokolwiek) w swoim szablonie:

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

Myślę, że potrzebujesz à target = "_ blank" , więc możesz użyć window.open:

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

Jeśli korzystałeś z podpięcia cyklu życia OnDestry, możesz być zainteresowany użyciem czegoś takiego przed wywołaniem window.location.href = ...

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

to wywoła wywołanie zwrotne OnDestry w komponencie, które może Ci się spodobać.

Ohh, a także:

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

to miejsce, w którym znajduje się router.

--- EDYTUJ --- Niestety, mogłem się mylić w powyższym przykładzie. Przynajmniej nie działa teraz zgodnie z oczekiwaniami w moim kodzie produkcyjnym - więc dopóki nie mam czasu na dalsze zbadanie, rozwiązuję to w ten sposób (ponieważ moja aplikacja naprawdę potrzebuje haka, gdy to możliwe)

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

Zasadniczo trasowanie do dowolnej (fikcyjnej) trasy w celu wymuszenia zaczepienia, a następnie nawigacja zgodnie z żądaniem.

w nowszych wersjach Angulara z oknem jako plikiem any

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

Po oderwaniu głowy rozwiązaniem jest po prostu dodanie http: // do href.

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

Użyłem window.location.href = ' http: // external-url ';

Dla mnie przekierowania działały w Chrome, ale nie działały w Firefoksie. Poniższy kod rozwiązał mój problem:

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

Zrobiłem to przy użyciu lokalizacji Angular 2, ponieważ nie chciałem samodzielnie manipulować globalnym obiektem okna.

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

Można to zrobić w ten sposób:

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

Żadne z powyższych rozwiązań nie zadziałało, właśnie dodałem

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

To zadziałało dla mnie.

Lub spróbuj użyć

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

W swoim komponencie .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';
  }
}

W Twoim pliku 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;**