Question

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

Location.go()，Router.navigate()和Router.navigateByUrl()可以将用户发送到Angular 2应用中的其他部分（路线），但我无法看到它们如何用于重定向到外部网站？

Answer 1

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

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

Answer 2

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

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

在一个函数中。

<强>一些-page.component.ts

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

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

<强>一些-page.component.html

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

查看plateformBrowser回购以获取更多信息。

Answer 3

正如丹尼斯斯莫勒克所说，

The solution已经死了。将window.location.href设置为您要切换到的网址即可。

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

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 = ...

之前，您可能有兴趣使用类似的东西。

get('type') === 'basic.Circle')

将触发您可能喜欢的组件中的OnDestry回调。

哦，还有：

    this.router.ngOnDestroy();
    window.location.href = 'http://www.cnn.com/';

是您找到路由器的地方。

--- --- EDIT 可悲的是，我在上面的例子中可能错了。至少现在我的生产代码没有按照它的方式工作 - 所以，在我有时间进一步调查之前，我这样解决它（因为我的应用程序确实需要钩子的时候）

import { Router } from '@angular/router';

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

Answer 6

在新版Angular中，窗口为function comparer(a, b) { var nameA = a.toUpperCase(); // ignore upper and lowercase var nameB = b.toUpperCase(); // ignore upper and lowercase if (nameA < nameB) { return -1; } if (nameA > nameB) { return 1; } // names must be equal return 0; }

any

Answer 7

我使用了window.location.href =＆＃39; http://external-url＆＃39;;

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

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

Answer 8

解开头后，解决办法就是将http：//添加到href。

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

Answer 9

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

喜欢

window.location.href = 'redirect_url';

另一种角度文档：

从角度导入文件，并且必须同时注入文件，否则会出错

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

Answer 10

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

Answer 11

有两个选项：

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

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

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

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

Answer 12

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

Answer 13

以上所有解决方案都不适合我，我刚刚添加了

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

这对我有用。

Answer 14

就这么简单

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

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

14 个答案: