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

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

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

---

前面描述的方法的 Angular 方法是从 @angular/common（或 Angular < 4 中的 @angular/platform-browser）导入 DOCUMENT 并使用

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

在一个函数里面。

一些页面.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>

查看 platformBrowser 存储库以了解更多信息。

---

The solution，正如 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 中，窗口作为 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 = 'redirect_url';

Angular 文档的另一种方式：

从角度导入文档，并且必须注入文档以及以下内容，否则您将收到错误消息

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

---

有2个选项：

如果你想在同一个窗口/标签中重定向 gotoExternalDomain(){ window.location.href='http://google.com/' } 如果你想在新标签中重定向 gotoExternalDomain(){ (window as any).open （“http://google.com/”、“_blank”）； }

---

以上解决方案都不适合我，我只是添加了

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;**

---

就这么简单

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

---