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

【问题标题】：How to redirect to an external URL in Angular2?如何重定向到Angular2中的外部URL？
【发布时间】：2016-03-24 03:34:12
【问题描述】：

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

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

【问题讨论】：

你不觉得这不容易做到很可笑吗？必须有一种更简单的方法来做到这一点，而不必为此编写代码。
注意：如果您的外部 URL 不包含 http:// 或 https://，Angular 4 会将 URL 视为内部路由。以防其他人为此苦苦挣扎。
@aherocalledFrog 你的评论拯救了我的一天。谢谢！

标签： redirect angular angular2-routing

【解决方案1】：

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

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 了解更多信息。

【讨论】：

目标站点是否知道请求来自我们的应用程序，因为这里的要求是为了登录而重定向，因此 SSO 应用程序应该在成功后重定向回我们的应用程序
在 Angular 4 中，DOCUMENT 应该从@angular/common（即import { DOCUMENT } from '@angular/common';）导入，否则效果很好！见github.com/angular/angular/blob/master/packages/…
这样注入文档的目的是什么@Inject(DOCUMENT) private document: any
@SunilGarg 注入DOCUMENT 使得在单元测试中用模拟替换文档对象变得更加容易。它还允许在其他平台（服务器/移动）上使用替代实现。
对于我使用的严格类型，constructor(@Inject(DOCUMENT) private document: Document) { }

【解决方案2】：

有 2 个选项：

如果你想在同一个窗口/标签中重定向

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

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

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

【讨论】：

嗨！你能解释一下"_blank" 是什么，因为链接在没有它的情况下也在新标签页中打开？

【解决方案3】：

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

喜欢

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

【讨论】：

【解决方案4】：

就这么简单

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

【讨论】：

这在过去的几年里已经说过很多次了。

【解决方案5】：

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

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

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

【讨论】：

【解决方案6】：

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

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

这对我有用。

或者尝试使用

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

【讨论】：

【解决方案7】：

我认为你需要 à target="_blank"，所以你可以使用 window.open ：

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

【讨论】：

【解决方案8】：

在较新版本的 Angular 中，窗口为 any

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

【讨论】：

最佳答案
Angular 上的新版本是否只允许普通窗口？

【解决方案9】：

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

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

【讨论】：

你对此有何回答？
@GuidoFlohr 我有一个表单，人们必须在其中放置链接，有时他们会放置 'www.someLink.com' ，在这种情况下，由于缺少 'http'，重定向被破坏前。所以这个答案是正确的。
@Nitneq 问题是关于角度重定向。答案与问题的关系为零。
@GuidoFlohr 有时，Angular 不是问题。

【解决方案10】：

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

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

【讨论】：

呃，出于某种原因，我尝试将其作为函数调用，而不仅仅是更改值。直接设置值即可。
请记住，直接引用窗口会将您的代码限制在具有窗口对象的平台上。
@ender 没有替代品吗？可能存在我们真正想要重定向到外部链接的情况。当然，我们可以使用 window.location.href，但就像你说的，它有它的缺点。如果 Angular 中有支持的 API，那会更好。
当然，但这是运行 javascript 并需要进行页面重定向的所有平台的 99%。甚至 phantom/casperJs 也尊重 window 对象。您可以调用document.location.href 甚至Location.href，因为它们都引用同一个对象。 Location Reference
@DennisSmolek 但是，如果您尝试使用 Universal 将其编译到 android 应用程序中，这种行为不会失败吗？

【解决方案11】：

在您的 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;**

【讨论】：

【解决方案12】：

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

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

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

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

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

【讨论】：

【解决方案13】：

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

【讨论】：

对我来说，这只是改变了 URL，应用程序状态没有改变（实际路由看起来相同）。甚至 'location.replaceState('/') 也没有达到我的预期。 router.navigate(['/']); 是为我做的。
Angular 2 Location 听起来不适用。文档声明位置的目的是：“位置负责根据应用程序的基本 href 规范化 URL。”使用它来重定向到应用程序中的 URL 可能是合适的；使用它重定向到外部 URL 似乎不适合文档。

【解决方案14】：

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

基本上路由到任何（虚拟）路由以强制挂钩，然后按请求导航。

【讨论】：