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

Question

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

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

Answer 1

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

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

Answer 2

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

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存储库以获取更多信息。

Answer 3

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

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

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

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

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

Answer 4

我认为您需要 à target="_blank"，因此您可以使用window.open：

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

Answer 5

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

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

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

Answer 7

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

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

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

Answer 8

扯掉我的头后，解决方案就是将http：//添加到href。

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

Answer 9

I did it using Angular 2 Location since I didn't want to manipulate the global window object myself.

https://angular.io/docs/ts/latest/api/common/index/Location-class.html#!#prepareExternalUrl-anchor

It can be done like this:

import {Component} from '@angular/core';
import {Location} from '@angular/common';
@Component({selector: 'app-component'})
class AppCmp {
  constructor(location: Location) {
    location.go('/foo');
  }
}

Answer 10

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

喜欢

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

Answer 11

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

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

这对我有用。

或尝试使用

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

Answer 12

有2个选项：

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

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

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

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

Answer 13

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

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

Answer 14

就这么简单

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