Angular 2 - 重定向到外部 URL 并在新选项卡中打开

Posted 2023-02-22

【中文标题】Angular 2 - 重定向到外部 URL 并在新选项卡中打开

【英文标题】：Angular 2 - Redirect to an external URL and open in a new tab

【发布时间】：2017-08-04 03:23:15

【问题描述】：

当用户单击链接时，我正在尝试打开一个新页面。我不能使用 Angular 2 路由器，因为它没有任何重定向到外部 URL 的功能。

所以，我正在使用 window.location.href="...";

html代码：

<button (click)="onNavigate()">Google</tn-submenu-link>

打字稿代码：

onNavigate()
        //this.router.navigateByUrl("https://www.google.com");
        window.location.href="https://www.google.com";
    

但是如何在新标签页中打开它？使用 window.location.href 时？

【问题讨论】：

如果你可以把它缩小到使用 javascript，这应该是一个 javascript 问题，而不是 Angular2。你能应用这个解决方案***.com/questions/19851782/… 吗？

@HarryNinh Angular 2 和 4 不会在组件内公开 window 对象（虽然您可以使用 window 全局变量，但最好执行特定于平台的任务（例如使用 window 对象，这在浏览器之间有所不同）使用 Angular 服务。

【参考方案1】：

onNavigate()
    window.open("https://www.google.com", "_blank");

【讨论】：

当我使用这种方法时，Chrome 会阻止弹出窗口。你有什么解决办法吗？

@sunnyiitkgp window.open() 必须在由用户操作（例如 onclick）触发的回调中调用。

@gokcand 很明显，但这并没有改变情况，因为如上所述仍然被阻止。

没有什么能比得上好的老香草 javascript :)

【参考方案2】：

使用window.open() 的一个注意事项是，如果您传递给它的网址前面没有http:// 或https://，则Angular 会将其视为路线。

要解决这个问题，请测试 url 是否以 http:// 或 https:// 开头，如果不是则附加它。

let url: string = '';
if (!/^http[s]?:\/\//.test(this.urlToOpen)) 
    url += 'http://';


url += this.urlToOpen;
window.open(url, '_blank');

【讨论】：

我已经断断续续地搜索了一周。在 Angular 4 中，这对我来说是一个短期解决方案：，之前它被视为路由。谢谢！

不能// 够吗？例如：window.open(``//$this.urlToOpen``, '_blank')

【参考方案3】：

另一种可能的解决方案是：

const link = document.createElement('a');
link.target = '_blank';
link.href = 'https://www.google.es';
link.setAttribute('visibility', 'hidden');
link.click();

【讨论】：

此方法在新标签中打开链接。 " window.open(url, '_blank'); " 打开通常被 Chrome 阻止的弹出窗口

【参考方案4】：

在 HTML 中：

<a class="main-item" (click)="onNavigate()">Go to URL</a>

或

<button class="main-item" (click)="onNavigate()">Go to URL</button>

在 TS 文件中：

onNavigate()
    // your logic here.... like set the url 
    const url = 'https://www.google.com';
    window.open(url, '_blank');

【参考方案5】：

如果您在 URL 中有绝对部分，我想与您分享另一个解决方案

$_spPageContextInfo.webAbsoluteUrl 的 SharePoint 解决方案

HTML：

<button (click)="onNavigate()">Google</button>

打字稿：

onNavigate()

    let link = `$_spPageContextInfo.webAbsoluteUrl/SiteAssets/Pages/help.aspx#/help`;
    window.open(link, "_blank");

网址将在新标签页中打开。

【参考方案6】：

你可以在你的打字稿代码中这样做

onNavigate()
var location="https://google.com",

在您的 html 代码中添加一个锚标记并传递该变量（位置）

<a href="location" target="_blank">Redirect Location</a>

假设您有这样的网址 www.google.com 没有 http 并且您没有被重定向到给定的网址，然后将 http:// 添加到 location 像这样

var location = 'http://'+ www.google.com

【参考方案7】：

var url = "https://yourURL.com";
var win = window.open(url, '_blank');
    win.opener = null;
    win.focus();

这将解决问题，在这里您不需要使用 DomSanitizer。它对我有用

【参考方案8】：

为了更全面地解决这个问题，这里有另一种使用指令的方法：

import  Directive, HostListener, ElementRef  from "@angular/core";

@Directive(
  selector: "[hrefExternalUrl]"
)
export class HrefExternalUrlDirective 
  constructor(elementRef: ElementRef) 

  @HostListener("click", ["$event"])
  onClick(event: MouseEvent) 
    event.preventDefault();

    let url: string = (<any>event.currentTarget).getAttribute("href");

    if (url && url.indexOf("http") === -1) 
      url = `//$url`;
    

    window.open(url, "_blank");
  

那么就这么简单：

<a [href]="url" hrefExternalUrl> Link </a>

别忘了在你的模块中声明指令。

【参考方案9】：

我们可以使用 target = blank 在新标签页中打开

 <a href="https://www.google.co.in/" target="blank">click Here </a>