Angular2에서 외부 URL로 리디렉션하는 방법은 무엇입니까?

Angular 2에서 사용자를 완전히 외부 URL로 리디렉션하는 방법은 무엇입니까? 예를 들어 인증을 위해 사용자를 OAuth2 서버로 리디렉션해야하는 경우 어떻게해야합니까?

Location.go(), Router.navigate()및 Router.navigateByUrl()각이 응용 프로그램 내에서 다른 섹션 (경로)에 사용자를 보내기위한 좋은,하지만 난 그들이 외부 사이트로 리디렉션하는 데 사용할 수있는 방법을 볼 수없는 이유는 무엇입니까?

이것을 사용할 수 있습니다-> window.location.href = '...';

그러면 페이지가 원하는대로 변경됩니다.

앞에서 설명한 방법에 대한 Angular 접근법 DOCUMENT은 @angular/common(또는 @angular/platform-browserAngular <4)에서 가져 와서 사용하는 것입니다

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

함수 내부.

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>

자세한 정보 는 plateformBrowser 저장소를 확인하십시오 .

Dennis Smolek이 말했듯 이 솔루션 은 매우 간단합니다. window.location.href전환하려는 URL로 설정 하면 작동합니다.

예를 들어, 컴포넌트의 클래스 파일 (컨트롤러)에이 메소드가있는 경우 :

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

그런 다음 (click)템플릿의 버튼 (또는 무엇이든)에 대한 적절한 호출로 간단히 호출 할 수 있습니다.

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

나는 당신이 à target = "_ blank"필요하다고 생각 하므로 다음을 사용할 수 있습니다 window.open.

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

OnDestry 수명주기 후크를 사용하고 있다면 window.location.href = ...를 호출하기 전에 이와 같은 것을 사용하는 것이 좋습니다.

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

구성 요소에서 OnDestry 콜백을 트리거합니다.

아, 그리고 :

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

라우터를 찾을 수있는 곳입니다.

--- 편집 --- 슬프게도, 위의 예에서 틀렸을 수도 있습니다. 적어도 현재 프로덕션 코드에서 실행 된대로 작동하지 않습니다. 따라서 더 조사 할 시간이 될 때까지 다음과 같이 해결합니다 (가능한 경우 앱이 실제로 후크가 필요하기 때문에)

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

기본적으로 임의의 (더미) 경로로 라우팅하여 후크를 강제 한 다음 요청에 따라 탐색합니다.

윈도우가있는 Angular의 최신 버전에서 any

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

내 머리를 찢은 후에 해결책은 http : //를 href에 추가하는 것입니다.

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

window.location.href = ' http : // external-url ';을 사용했습니다.

나에게 리디렉션은 Chrome에서 작동했지만 Firefox에서는 작동하지 않았습니다. 다음 코드는 내 문제를 해결했습니다.

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

전역 창 개체를 직접 조작하고 싶지 않기 때문에 Angular 2 Location을 사용하여 수행했습니다.

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

다음과 같이 할 수 있습니다 :

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

위의 솔루션 중 어느 것도 나를 위해 일한 적이 없으며 방금 추가했습니다.

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

이것은 나를 위해 일했습니다.

또는 사용해보십시오

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

당신에 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';
  }
}

당신에 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;**