Як перенаправити на зовнішню URL-адресу в Angular2?

Який спосіб перенаправити користувача до повністю зовнішньої URL-адреси в Angular 2. Наприклад, якщо мені потрібно перенаправити користувача на сервер OAuth2 для аутентифікації, як би це зробити?

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

Ви можете використовувати це-> window.location.href = '...';

Це змінить сторінку на все, що ви хочете ..

Кутовий підхід до раніше описаних методів полягає в імпорті DOCUMENTз @angular/common(або @angular/platform-browserв Angular <4) та використанні

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

всередині функції.

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>

Ознайомтеся з табличкою форматуBrowser repo для отримання додаткової інформації.

Як сказав Денніс Смолек, рішення є мертвим простим. Встановіть 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';

де ви знайдете роутер.

--- EDIT --- На жаль, я, можливо, помилявся у наведеному вище прикладі. Принаймні, це не працює так, як очікувалося в моєму виробничому коді зараз - тож, поки я не встигну дослідити далі, я вирішу його так (оскільки моєму додатку справді потрібен гачок, коли це можливо)

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

В основному, маршрутизація до будь-якого (фіктивного) маршруту, щоб примусити гак, а потім перейдіть, як потрібно.

у нових версіях кутових з вікном як 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");

У своєму компоненті.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;**