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

这将改变页面到任何你想要的。

正如丹尼斯·斯莫雷克所说，解决办法非常简单。将window.location.href设置为你想要切换到的URL，它就可以工作了。

例如，如果你在组件的类文件(控制器)中有这个方法:

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

然后你可以很简单地在模板中的一个按钮(或任何东西)上调用它:

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

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

使用前面描述的方法的Angular方法是从@angular/common(或Angular中的@angular/platform-browser)导入DOCUMENT < 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>

查看platformBrowser repo以获得更多信息。

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

对我来说，重定向在Chrome中有效，但在Firefox中不起作用。 下面的代码解决了我的问题:

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

在你的组件中

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

我认为你需要à target="_blank"，这样你就可以使用window。开放:

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

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

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

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

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

以上的解决方案对我都不起作用，我只是补充说

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

这对我很管用。

或者试着使用

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

就像这样简单

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

你可以用多种方式重定向:

like

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

有两种选择:

如果你想重定向在同一窗口/标签 gotoExternalDomain () { window.location.href = ' http://google.com/ ' ｝ 如果你想重定向到新标签 gotoExternalDomain () { (窗口).open(“http://google.com/”、“平等”); ｝

要使用@Inject，必须导入它。我在所有答案中都没看到这个。

TS文件:

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>