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

Question

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

Location.go()、Router.navigate() 和 Router.navigateByUrl() 可以将用户发送到 Angular 2 应用程序中的另一个部分（路线），但我不能看看如何使用它们重定向到外部站点？

Answer 1

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

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

Answer 2

，正如 Dennis Smolek 所说，非常简单。将 window.location.href 设置为您要切换到的 URL，它就可以正常工作。

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

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

然后您可以通过在模板中的按钮（或其他）上适当 (click) 调用来非常简单地调用它：

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

Answer 3

如果您一直在使用 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 4

我使用 Angular 2 Location 做到了，因为我不想自己操作全局 window 对象。

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 5

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

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

函数内部。

一些-page.component.ts

import { DOCUMENT } from '@angular/common';
...
constructor(@Inject(DOCUMENT) private document: Document) { }

goToUrl(): void {
    this.document.location.href = 'https://whosebug.com';
}

一些-page.component.html

<button type="button" (click)="goToUrl()">Click me!</button>

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

Answer 6

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

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

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

Answer 7

在你的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://whosebug.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;**

Answer 8

我想你需要 à target="_blank"，这样你就可以使用 window.open :

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

Answer 9

把我的脑袋扯掉了，解决办法就是在href中添加http://。

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

Answer 10

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

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

Answer 11

None 以上解决方案对我有用，我只是添加了

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

这对我有用。

或尝试使用

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

Answer 12

就这么简单

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

Answer 13

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

喜欢

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

Answer 14

有2个选项：

如果你想在相同的地方重定向 window/tab

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

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

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

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

How to redirect to an external URL in Angular2?

redirect

angular

angular2-routing