在Angular 2中将用户重定向到完全外部URL的方法是什么.例如,如果我需要将用户重定向到OAuth2服务器以进行身份验证,我该怎么做?
Location.go()
,Router.navigate()
并且Router.navigateByUrl()
可以将用户发送到Angular 2应用程序中的另一个部分(路由),但我看不出它们如何用于重定向到外部站点?
你可以使用这个 - > window.location.href = '...';
这会将页面更改为您想要的任何内容..
前面描述的方法的Angular方法是DOCUMENT
从@angular/common
(或@angular/platform-browser
在Angular <4中)导入并使用
document.location.href = 'https://stackoverflow.com';
在一个函数内部.
一些-page.component.ts
import { DOCUMENT } from '@angular/common';
...
constructor(@Inject(DOCUMENT) private document: Document) { }
goToUrl(): void {
this.document.location.href = 'https://stackoverflow.com';
}
一些-page.component.html
查看plateformBrowser repo了解更多信息.
正如丹尼斯斯莫勒克所说,解决方案很简单.设置window.location.href
为您要切换到的URL,它只是工作.
例如,如果组件的类文件(控制器)中有此方法:
goCNN() {
window.location.href='http://www.cnn.com/';
}
然后你可以通过(click)
在模板中的按钮(或其他)上进行适当的调用来简单地调用它:
我认为你需要àtarget="_ blank",所以你可以使用window.open
:
gotoGoogle() : void { window.open("https://www.google.com", "_blank"); }
如果你一直在使用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中,将window作为 any
(window as any).open(someUrl, "_blank");