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


175

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

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


4
Не кажется ли вам смешным, что это нелегко сделать? Должен быть более простой способ сделать это, не кодируя его.
Маккурт

4
Примечание. Если ваш внешний URL-адрес не содержит http: // или https: //, Angular 4 будет обрабатывать URL-адрес как внутренний маршрут. В случае, если кто-то еще борется с этим.
aherocalledFrog

Ответы:


216

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

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


3
Тьфу, я пытался вызвать его как функцию по какой-то причине, а не просто изменить значение. Установка значения напрямую работает.
Майкл Орил

9
Просто помните, что прямая ссылка на окно ограничит ваш код платформами с объектом window.
конец

2
@ender нет альтернативы этому? Могут быть сценарии, когда мы действительно хотим перенаправить на внешние ссылки. Конечно, мы можем использовать window.location.href, но, как вы говорите, у него есть свои недостатки. Если в Angular есть поддерживаемый API, это поможет лучше.
Кришнан

1
Конечно, но это 99% всех платформ, которые работают с javascript и должны перенаправить страницу. Даже фантом / касперж уважают объект окна. Вы можете позвонить document.location.hrefили даже Location.hrefкак они все ссылаются на один и тот же объект. Ссылка на местоположение
Деннис Смолек

2
@DennisSmolek Но если вы попытаетесь скомпилировать это в приложение для Android с помощью Universal, разве это поведение не сработает?
конец

124

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


Будет ли целевой сайт знать, что запрос исходит от нашего приложения, поскольку здесь требуется перенаправление для входа в систему, и, следовательно, приложение SSO должно перенаправить обратно в наше приложение после успеха
NitinSingh

5
В угловом 4 ДОКУМЕНТ должен быть импортирован из @angular/common(т.е. import { DOCUMENT } from '@angular/common';), но в остальном это прекрасно работает! См. Github.com/angular/angular/blob/master/packages/…
Джон

4
Какова цель введения документа таким способом@Inject(DOCUMENT) private document: any
Сунил

1
@SunilGarg Injecting DOCUMENTоблегчает замену объекта документа на макет в юнит-тестах. Это также позволяет использовать альтернативную реализацию на других платформах (серверная / мобильная).
eppsilon

3
Для строгого набора текста я использую,constructor(@Inject(DOCUMENT) private document: Document) { }
Ян Джеймисон

38

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

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

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

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

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

21

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

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

10

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

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



3

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

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

4
На какой вопрос вы отвечаете?
Гвидо Флор

2

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

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

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

1

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

1
Для меня это просто меняет URL, и состояние приложения не меняется (фактический маршрут выглядит одинаково). Даже 'location.replaceState (' / ') не действовал, как я ожидал. router.navigate(['/']);это то, что сделал это для меня.
Мэтт Роулз

2
Angular 2 Location не звучит применимо. В документе указано, что целью определения местоположения является: «Местоположение отвечает за нормализацию URL-адреса в соответствии с базовым href приложения». Использование этого для перенаправления на URL в приложении может быть целесообразным; его использование для перенаправления на внешний URL-адрес не подходит для документов.
Дж. Фриц Барнс

1

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

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

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

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

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

0

В твоих 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;**
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.