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

Каков метод перенаправления пользователя на полностью внешний URL-адрес в Angular 2. Например, если мне нужно перенаправить пользователя на сервер OAuth2 для аутентификации, как мне это сделать?

Location.go(), Router.navigate()И Router.navigateByUrl()прекрасно подходит для отправки пользователя в другой раздел (маршрут) в пределах углового 2 приложения, но я не могу видеть , как они могут быть использованы для перенаправления на внешний сайт?

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

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

Угловой подход к ранее описанным методам заключается в импорте DOCUMENTиз @angular/common(или @angular/platform-browserв Angular <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 для получения дополнительной информации.

Решение , как сказал Деннис Смолек, очень простое. Установите window.location.hrefURL-адрес, на который хотите переключиться, и он просто работает.

Например, если у вас был этот метод в файле классов вашего компонента (контроллер):

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