Bagaimana cara mengarahkan ulang ke URL eksternal di Angular2?

Apa metode untuk mengarahkan pengguna ke URL yang sepenuhnya eksternal di Angular 2. Sebagai contoh, jika saya perlu mengarahkan pengguna ke server OAuth2 untuk mengotentikasi, bagaimana saya melakukannya?

Location.go(),, Router.navigate()dan Router.navigateByUrl()apakah boleh mengirim pengguna ke bagian lain (rute) dalam aplikasi Angular 2, tetapi saya tidak dapat melihat bagaimana mereka dapat digunakan untuk mengarahkan ulang ke situs eksternal?

Anda bisa menggunakan ini-> window.location.href = '...';

Ini akan mengubah halaman menjadi apa pun yang Anda inginkan ..

Pendekatan Angular ke metode yang dijelaskan sebelumnya adalah mengimpor DOCUMENTdari @angular/common(atau @angular/platform-browserdalam Angular <4) dan digunakan

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

di dalam suatu fungsi.

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>

Lihat repo plateformBrowser untuk info lebih lanjut.

Solusinya , seperti yang dikatakan Dennis Smolek, sangat sederhana. Setel window.location.hrefke URL yang ingin Anda alihkan dan hanya berfungsi.

Misalnya, jika Anda memiliki metode ini di file kelas komponen Anda (pengontrol):

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

Maka Anda bisa menyebutnya cukup sederhana dengan (click)panggilan yang sesuai pada tombol (atau apa pun) di template Anda:

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

Saya pikir Anda perlu à target = "_ blank" , jadi Anda dapat menggunakan window.open:

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

Jika Anda telah menggunakan kait siklus hidup OnDestry, Anda mungkin tertarik untuk menggunakan sesuatu seperti ini sebelum memanggil window.location.href = ...

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

yang akan memicu panggilan balik OnDestry di komponen Anda yang mungkin Anda sukai.

Ohh, dan juga:

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

Di sinilah Anda menemukan router.

--- EDIT --- Sayangnya, saya mungkin salah dalam contoh di atas. Setidaknya itu tidak berfungsi seperti yang diharapkan dalam kode produksi saya sekarang - jadi, sampai saya punya waktu untuk menyelidiki lebih lanjut, saya menyelesaikannya seperti ini (karena aplikasi saya benar-benar membutuhkan pengait jika memungkinkan)

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

Pada dasarnya merutekan ke rute (dummy) apa pun untuk memaksa pengait, lalu menavigasi sesuai permintaan.

di versi Angular dengan jendela yang lebih baru sebagai any

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

Setelah merobek kepalaku, solusinya adalah menambahkan http: // ke href.

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

Saya menggunakan window.location.href = ' http: // external-url ';

Bagi saya pengalihan bekerja di Chrome, tetapi tidak berfungsi di Firefox. Kode berikut menyelesaikan masalah saya:

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

Saya melakukannya menggunakan Lokasi 2 Angular karena saya tidak ingin memanipulasi objek jendela global sendiri.

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

Itu bisa dilakukan seperti ini:

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

Tidak ada solusi di atas yang berfungsi untuk saya, saya hanya menambahkan

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

Ini berhasil untuk saya.

Atau coba gunakan

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

Di component.ts Anda

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

Di component.html Anda

<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;**