Làm cách nào để chuyển hướng đến một URL bên ngoài trong Angular2?

Phương pháp để chuyển hướng người dùng đến một URL hoàn toàn bên ngoài trong Angular 2. Ví dụ: nếu tôi cần chuyển hướng người dùng đến máy chủ OAuth2 để xác thực, tôi sẽ làm thế nào?

Location.go(), Router.navigate()và Router.navigateByUrl()ổn khi gửi người dùng đến một phần (tuyến đường) khác trong ứng dụng Angular 2, nhưng tôi không thể thấy cách họ có thể được sử dụng để chuyển hướng đến một trang web bên ngoài?

Bạn có thể sử dụng cái này-> window.location.href = '...';

Điều này sẽ thay đổi trang thành bất cứ điều gì bạn muốn ..

Cách tiếp cận Angular đối với các phương thức được mô tả trước đây là nhập DOCUMENTtừ @angular/common(hoặc @angular/platform-browsertrong Angular <4) và sử dụng

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

bên trong một chức năng.

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>

Kiểm tra repo mảngformBrowser để biết thêm thông tin.

Giải pháp , như Dennis Smolek nói, đã chết đơn giản. Đặt window.location.hrefthành URL bạn muốn chuyển sang và nó chỉ hoạt động.

Ví dụ: nếu bạn có phương thức này trong tệp lớp (bộ điều khiển) của thành phần:

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

Sau đó, bạn có thể gọi nó khá đơn giản với (click)cuộc gọi thích hợp trên một nút (hoặc bất cứ điều gì) trong mẫu của bạn:

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

Tôi nghĩ bạn cần à target = "_ blank" , vì vậy sau đó bạn có thể sử dụng window.open:

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

Nếu bạn đã sử dụng hook vòng đời OnDestry, bạn có thể quan tâm đến việc sử dụng cái gì đó như thế này trước khi gọi window.location.href = ...

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

điều đó sẽ kích hoạt cuộc gọi lại OnDestry trong thành phần của bạn mà bạn có thể thích.

Ồ, và cũng:

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

là nơi bạn tìm thấy bộ định tuyến.

--- EDIT --- Đáng buồn thay, tôi có thể đã sai trong ví dụ trên. Ít nhất là nó không hoạt động như ngoại lệ trong mã sản xuất của tôi ngay bây giờ - vì vậy, cho đến khi tôi có thời gian để điều tra thêm, tôi giải quyết nó như thế này (vì ứng dụng của tôi thực sự cần hook khi có thể)

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

Về cơ bản định tuyến đến bất kỳ tuyến (giả) nào để buộc móc, và sau đó điều hướng theo yêu cầu.

trong các phiên bản mới hơn của Angular với cửa sổ là một any

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

Sau khi tách đầu tôi ra, giải pháp chỉ là thêm http: // to href.

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

Tôi đã sử dụng window.location.href = ' http: // bên ngoài-url ';

Đối với tôi, các chuyển hướng hoạt động trong Chrome, nhưng không hoạt động trong Firefox. Đoạn mã sau đã giải quyết vấn đề của tôi:

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

Tôi đã làm điều đó bằng cách sử dụng Vị trí góc 2 vì tôi không muốn tự mình thao tác với đối tượng cửa sổ toàn cầu.

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

Nó có thể được thực hiện như thế này:

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

Không có giải pháp nào ở trên làm việc cho tôi, tôi chỉ cần thêm

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

Điều này làm việc cho tôi.

Hoặc thử sử dụng

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

Trong thành phần của bạn.

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

Trong thành phần của bạn.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;**