Как перенаправить на внешний URL в Angular2?

Ответ 1

Вы можете использовать this-> window.location.href= '...';

Это изменит страницу на то, что вы хотите..

Ответ 2

Angular подход к ранее описанным методам заключается в импорте DOCUMENT из @angular/common (или @angular/platform-browser в Angular  & Lt; 4) и использовать

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

внутри функции.

некоторые-page.component.ts

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

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

некоторые-page.component.html

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

Ознакомьтесь с репозиторием plateformBrowser для получения дополнительной информации.

Ответ 3

Решение, как сказал Деннис Смолек, прост. Установите window.location.href на URL, к которому вы хотите перейти, и он просто работает.

Например, если вы использовали этот метод в своем файле (контроллере) класса компонентов:

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

Тогда вы могли бы назвать это достаточно просто с помощью соответствующего (click) вызова кнопки (или любого другого) в вашем шаблоне:

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

Ответ 4

Я думаю, что вам нужен target = "_ blank", поэтому вы можете использовать window.open:

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

Ответ 5

Если вы используете привязку жизненного цикла OnDestry, вам может быть интересно использовать что-то вроде этого, прежде чем вызывать window.location.href=...

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

который вызовет обратный вызов OnDestry в вашем компоненте, который вам может понравиться.

Ohh, а также:

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

находится маршрутизатор.

--- EDIT --- К сожалению, я мог ошибаться в приведенном выше примере. По крайней мере, он не работает как exepected в моем производственном кодексе прямо сейчас, поэтому, пока у меня не будет времени для дальнейшего изучения, я решаю его так (так как моему приложению действительно нужен крюк, когда это возможно)

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

В основном маршрутизация на любой (фиктивный) маршрут для принудительного подключения, а затем переход по запрошенному адресу.

Ответ 6

в более новых версиях Angular с окном как- any

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

Ответ 7

Решив проблему, я просто добавляю http://в href.

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

Ответ 8

Я использовал window.location.href= 'http://external-url';

Для меня перенаправления работали в Chrome, но не работали в Firefox. Следующий код разрешил мою проблему:

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

Ответ 9

Я сделал это с помощью 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');
  }
}

Ответ 10

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

В компоненте .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;**

Ответ 11

Ни одно из вышеперечисленных решений для меня не сработало, я просто добавил

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

Это сработало для меня.

Или попробуйте использовать

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