Angular2で外部URLにリダイレクトする方法は？

Angular 2で完全に外部のURLにユーザーをリダイレクトする方法は何ですか。たとえば、認証のためにユーザーをOAuth2サーバーにリダイレクトする必要がある場合、どうすればよいですか？

Location.go()、Router.navigate()、およびRouter.navigateByUrl()角度2アプリ内の他のセクション（ルート）にユーザーを送信するための罰金ですが、私は彼らが外部のサイトにリダイレクトするために使用する方法を見ることができませんか？

あなたはこれを使うことができます-> window.location.href = '...';

これにより、ページが必要なものに変更されます。

前述の方法に対するAngularのアプローチは、（Angular <4から）インポートDOCUMENTして使用することです@angular/common@angular/platform-browser

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リポジトリを確認してください。

デニス・スモレクが言ったように、解決策は非常に簡単です。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;**