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

Question

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

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

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

297

angular redirect angular2-routing

Источник

user1480995 17 дек '15 в 15:37

16 ответов

Решение

Угловой подход к ранее описанным методам заключается в импорте DOCUMENT от @angular/common (или же @angular/platform-browser в угловых < 4) и использовать

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

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

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

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

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

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

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

Проверьте пластинку Browser репо для получения дополнительной информации.

221

Источник

user2867829 25 фев '17 в 06:15

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

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

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

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

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

45

Источник

user1480995 17 дек '15 в 18:29

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

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

33

Источник

user1169453 07 окт '17 в 11:57

Если вы использовали хук жизненного цикла 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/';});

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

17

Источник

user4141526 21 сен '16 в 14:47

В новых версиях Angular с окном как any

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

13

Источник

user738048 29 ноя '18 в 19:50

Есть 2 варианта:

если вы хотите перенаправить в том же окне / вкладке
```
         gotoExternalDomain(){
     window.location.href='http://google.com/'
 }
```

если вы хотите перенаправить в новую вкладку

         gotoExternalDomain(){
     (window as any).open("http://google.com/", "_blank");
 }

8

Источник

user8208248 01 июн '21 в 00:38

Вы можете перенаправить несколькими способами:

нравиться

window.location.href = 'redirect_url';

Другой способ Angular документ:

импортировать документ из angular, и документ должен быть введен, а также ниже, иначе вы получите ошибку

import { DOCUMENT  } from '@angular/common';
export class AppComponent {
     constructor(
       @Inject(DOCUMENT) private document: Document
    ) {}
   this.document.location.href = 'redirect_url';
}

5

Источник

user11831973 12 окт '20 в 15:22

Я сделал это с помощью Angular 2 Location, так как не хотел сам манипулировать объектом глобального окна.

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

Это можно сделать так:

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

5

Источник

user3220080 02 ноя '16 в 09:58

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

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

5

Источник

user7757215 12 май '18 в 17:38

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

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

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

5

Источник

user2870919 28 апр '17 в 08:34

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

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

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

2

Источник

user7005734 18 мар '19 в 13:45

Большинство текущих ответов являются оптимальными, но для более чистого кода я бы рекомендовал использовать window вместо введенной ссылки на документ, поскольку это не что иное, как дубликат ссылки на само окно. Единственный случай, когда его лучше использовать, — это когда вы не можете напрямую использовать окно.

      const url : string = "https://stackoverflow.com/questions/34338440/how-to-redirect-to-an-external-url-in-angular2" 
window.open(url, "_blank")
//window.open(url, "_self")
//window.open(url, "_parent")
//window.open(url, "_top")

Этот код откроет окно, второй параметр которого является целевым атрибутом , который будет решать, где будет открыт URL-адрес.

Конкретные значения целевых атрибутов таковы: (mozilla)

_self: текущий контекст просмотра. (По умолчанию)

_blank: обычно новая вкладка, но пользователи могут настроить браузеры так, чтобы вместо этого открывалось новое окно.

_parent: родительский контекст просмотра текущего. Если нет родителя, ведет себя как _self.

_top: самый верхний контекст просмотра («самый высокий» контекст, который является предком текущего). Если предков нет, ведет себя как _self.

Благодаря этому вы можете получить более четкое решение о том, где следует открывать новый URL-адрес, чтобы конечному пользователю было удобнее работать.

В любом случае вы можете заменить router.navigate на

      window.open("relativePathFromCurentURL","_self")

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

1

Источник

Rejja Kubzek 21 авг '23 в 10:05

Чтобы использовать @Inject, вы должны импортировать его. Я не видел этого ни в одном из ответов.

ТС-файл:

      import { Component, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';

@Component({
  selector: 'app-my-comp.page',
  templateUrl: './my-comp.page.component.html',
  styleUrls: ['./my-comp.page.component.scss']
})
export class MyCompPageComponent {

  constructor(
    @Inject(DOCUMENT) private document: Document
  ) { }

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

}

HTML-файл:

      <button type="button" (click)="goToUrl()">Google</button>

0

Источник

user5129122 14 янв '23 в 13:18

Просто как это

window.location.href='http://www.google.com/';

-1

Источник

user7882886 06 авг '20 в 17:17

В твоих 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://stackru.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;**

-1

Источник

user5381331 10 май '17 в 13:42

Другие вопросы по тегам angular redirect angular2-routing

user1251604 17 дек '15 в 17:37 2015-12-17 17:37 · Accepted Answer · 2015-12-17 17:37

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

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

346

Источник

user1251604 17 дек '15 в 17:37