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

173

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?

Michael Oryl
źródło
4
Czy nie uważasz za śmieszne, że nie jest to łatwe? Musi istnieć prostszy sposób, aby to zrobić, bez konieczności kodowania.
Maccurt,
3
Uwaga: jeśli Twój zewnętrzny adres URL nie zawiera http: // lub https: //, Angular 4 potraktuje adres URL jako trasę wewnętrzną. Na wypadek, gdyby ktoś inny miał z tym problem.
aherocalledFrog

Odpowiedzi:

214

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

To zmieniłoby stronę na dowolną.

Dennis Smolek
źródło
3
Ugh, z jakiegoś powodu próbowałem nazwać to funkcją, a nie tylko zmieniać wartość. Ustawienie wartości działa bezpośrednio.
Michael Oryl
9
Pamiętaj tylko, że bezpośrednie odwoływanie się do okna ograniczy kod do platform z obiektem window.
ender
2
@ender czy nie ma dla niego alternatywy? Mogą istnieć scenariusze, w których naprawdę chcemy przekierować do linków zewnętrznych. Jasne, możemy użyć window.location.href, ale jak mówisz, ma to swoje wady. Jeśli w Angular jest obsługiwany interfejs API, to pomogłoby lepiej.
Krishnan
1
Jasne, ale to 99% wszystkich platform, które obsługują javascript i wymagają przekierowania strony. Nawet fantomy / casperJs szanują obiekt okna. Możesz zadzwonić document.location.hreflub nawet Location.hrefjak wszystkie odnoszą się do tego samego obiektu. Odniesienie do lokalizacji
Dennis Smolek
2
@DennisSmolek Ale czy jeśli spróbujesz skompilować to do aplikacji na Androida za pomocą Universal, czy to zachowanie nie zawiedzie?
koniec
124

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.

Brian
źródło
Czy witryna docelowa wie, że żądanie pochodzi z naszej aplikacji, ponieważ tutaj wymagane jest przekierowanie w celu logowania, a zatem aplikacja SSO powinna przekierować z powrotem do naszej aplikacji po sukcesie
NitinSingh
5
W kątowym 4 DOCUMENT powinien być importowany z @angular/common(tj. import { DOCUMENT } from '@angular/common';), Ale poza tym działa świetnie! Zobacz github.com/angular/angular/blob/master/packages/…
John
4
jaki jest cel wstrzykiwania dokumentu w ten sposób@Inject(DOCUMENT) private document: any
Sunil Garg
1
@SunilGarg Injecting DOCUMENTułatwia zastąpienie obiektu dokumentu makietą w testach jednostkowych. Pozwala również na alternatywną implementację do wykorzystania na innych platformach (serwerowych / mobilnych).
eppsilon
3
Do ścisłego pisania używam,constructor(@Inject(DOCUMENT) private document: Document) { }
Ian Jamieson
38

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>
Michael Oryl
źródło
21

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

gotoGoogle() : void {
     window.open("https://www.google.com", "_blank");
}
abahet
źródło
10

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.

Henry Arousell
źródło
6

w nowszych wersjach Angulara z oknem jako plikiem any

(window as any).open(someUrl, "_blank");
user738048
źródło
najlepsza odpowiedź
Victor Bredihin,
Czy nowsze wersje Angulara nie pozwalają tylko na zwykłe okno?
Justin
3

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

<a href="http://www.URL.com">Go somewhere</a>
Joel
źródło
4
Na jakie pytanie odpowiadasz?
Guido Flohr
2

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');
Laura Chesches
źródło
1

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');
  }
}
user3220080
źródło
1
Dla mnie to po prostu zmienia adres URL, a stan aplikacji się nie zmienia (rzeczywista trasa wygląda tak samo). Nawet atrybut „location.replaceState („ / ”) nie działał zgodnie z oczekiwaniami. router.navigate(['/']);co to dla mnie zrobiło.
Matt Rowles
2
Angular 2 Location nie ma zastosowania. Dokumenty podają, że celem lokalizacji jest: „Lokalizacja jest odpowiedzialna za znormalizowanie adresu URL względem podstawowego atrybutu href aplikacji”. Użycie tego do przekierowania do adresu URL w aplikacji może być właściwe; używanie go do przekierowania na zewnętrzny adres URL nie pasuje do dokumentów.
J. Fritz Barnes
1

Ż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");
Rishi0405
źródło
0

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;**
Phan Van Linh
źródło