当前位置:  开发笔记 > 编程语言 > 正文

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

如何解决《如何重定向到Angular2中的外部URL?》经验,为你挑选了6个好方法。

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

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



1> Dennis Smole..:

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

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


请记住,直接引用窗口会将代码限制为具有窗口对象的平台.
呃,我出于某种原因尝试将其称为功能,而不仅仅是改变价值.直接设置值有效.
@ender没有替代品吗?在某些情况下,我们确实希望重定向到外部链接。当然,我们可以使用window.location.href,但正如您所说,它有其缺点。如果Angular中有受支持的API,那会更好。
@DennisSmolek但是如果你尝试使用Universal将其编译成一个Android应用程序,这种行为会不会失败?

2> Brian..:

前面描述的方法的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了解更多信息.


在角度4中,DOCUMENT应该从`@angular/common`导入(即'@ {/常见'的'import {DOCUMENT};'),否则这个效果很好!请参阅https://github.com/angular/angular/blob/master/packages/platform-b​​rowser/src/dom/dom_tokens.ts
以这种方式注入文档的目的是什么?@Inject(DOCUMENT)私有文档:any`
对于严格键入,我使用`constructor(@Inject(DOCUMENT)private document:Document){}

3> Michael Oryl..:

正如丹尼斯斯莫勒克所说,解决方案很简单.设置window.location.href为您要切换到的URL,它只是工作.

例如,如果组件的类文件(控制器)中有此方法:

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

然后你可以通过(click)在模板中的按钮(或其他)上进行适当的调用来简单地调用它:




4> abahet..:

我认为你需要àtarget="_ blank",所以你可以使用window.open:

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



5> Henry Arouse..:

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

基本上路由到任何(虚拟)路由以强制挂钩,然后按要求导航.


不,不,没有用。太疯狂了

6> user738048..:

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

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

推荐阅读
夏晶阳--艺术
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有