如何重定向到Angular2中的外部URL？

Question

在Angular 2中将用户重定向到完全外部URL的方法是什么.例如,如果我需要将用户重定向到OAuth2服务器以进行身份​​验证,我该怎么做？

Location.go(),Router.navigate()并且Router.navigateByUrl()可以将用户发送到Angular 2应用程序中的另一个部分(路由),但我看不出它们如何用于重定向到外部站点？

Answer 1

你可以使用这个 - > window.location.href = '...';

这会将页面更改为您想要的任何内容..

Answer 2

前面描述的方法的Angular方法是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 repo了解更多信息.

Answer 3

正如丹尼斯斯莫勒克所说,解决方案很简单.设置window.location.href为您要切换到的URL,它只是工作.

例如,如果组件的类文件(控制器)中有此方法:

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

然后你可以通过(click)在模板中的按钮(或其他)上进行适当的调用来简单地调用它:

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

Answer 4

我认为你需要àtarget="_ blank",所以你可以使用window.open:

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

Answer 5

如果你一直在使用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/';});

基本上路由到任何(虚拟)路由以强制挂钩,然后按要求导航.

Answer 6

有 2 个选项：

1. 如果您想在同一窗口/选项卡中重定向

    gotoExternalDomain(){
        window.location.href='http://google.com/'
    }
   

2. 如果你想在新标签中重定向

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

Answer 7

我使用 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');
  }
}

Answer 8

我用了 window.location.href='http://external-url';

对我来说，重定向在 Chrome 中有效，但在 Firefox 中无效。以下代码解决了我的问题：

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

Answer 9

在扯掉我的头之后，解决方案只是将 http:// 添加到 href 。

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

Answer 10

在较新版本的Angular中，将window作为 any

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

Answer 11

您可以通过多种方式重定向：

喜欢

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