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

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

Location.go()，，Router.navigate()和Router.navigateByUrl()可以将用户发送到Angular 2应用程序内的另一个区域（路线），但是我看不到如何将其用于重定向到外部站点？

您可以使用此-> window.location.href = '...';

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

前面描述的方法的Angular方法是DOCUMENT从Angular <4 导入@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>

查看PlateformBrowser存储库以获取更多信息。

正如Dennis Smolek所说，解决方案非常简单。设置window.location.href为您要切换到的URL，它就可以使用。

例如，如果您的组件的类文件（控制器）中有此方法：

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中，将window作为 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;**