web-dev-qa-db-ja.com

Angular 2で外部URLにリダイレクトする方法

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

Location.go()、Router.navigate()、およびRouter.navigateByUrl()は、Angular 2アプリ内の別のセクション（ルート）にユーザーを送信するのに問題ありませんが、外部サイトへのリダイレクトに使用できる方法がわかりませんか。

redirectangularangular2-routing
107
Michael Oryl

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

これはあなたが望むものにページを変えるでしょう..

145
Dennis Smolek

前述のメソッドへのAngularアプローチは、@angular/common（またはAngular <4の@angular/platform-browser）からDOCUMENTをインポートして次のようにすることです。

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

関数の中.

some-page.component.ts 

import { DOCUMENT } from '@angular/common';
...
constructor(@Inject(DOCUMENT) private document: any) { }

goToUrl(): void {
    this.document.location.href = 'https://stackoverflow.com';
}

some-page.component.html 

<button type="button" (click)="goToUrl()">Click me!</button>

詳細については plateformBrowser リポジトリをチェックしてください。

72
Brian

解決策 、Dennis Smolekが言ったように、単純な死んでいる。 window.location.hrefをあなたが切り替えたいURLに設定すればそれだけでうまくいきます。

たとえば、コンポーネントのクラスファイル（コントローラ）にこのメソッドがあるとします。

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

それならあなたはテンプレート内のボタン（あるいは何でも）に対する適切な(click)呼び出しでそれを非常に簡単に呼び出すことができます：

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

target = "_ blank" が必要だと思う - それでwindow.openを使うことができる：

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

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

フックを強制するために基本的に任意の（ダミー）ルートにルーティングしてから、要求どおりにナビゲートします。

8
Henry Arousell

Angularの新しいバージョンでは、windowをanyとして使用

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

Window.location.href = ' http：// external-url ';を使用しました。

私にとっては、リダイレクトはChromeでは機能しましたが、Firefoxでは機能しませんでした。次のコードは私の問題を解決しました：

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

頭を切り落とした後の解決策は、http：//をhrefに追加することです。

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

グローバルウィンドウオブジェクトを自分で操作したくないので、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');
  }
}
1
user3220080

上記の解決策のどれも私のために働かなかった、私はちょうど加えた

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

これは私のために働きました。

0
Rishi

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;**
0
Phan Van Linh