Angular 2-重定向到外部URL并在新标签页中打开

当用户单击链接时，我正在尝试打开一个新页面。我不能使用Angular 2 Router，因为它没有任何功能可以重定向到外部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时？

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

使用上的一个警告window.open()是，如果您传递给它的网址不存在http://或不在网址https://之前，则angular将其视为一条路线。

要解决此问题，请测试该网址是否以http://或开头，https://如果没有则附加该网址。

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

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

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

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

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

如果您绝对有URL，我想与您分享另一种解决方案

SharePoint解决方案 ${_spPageContextInfo.webAbsoluteUrl}

HTML：

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

打字稿：

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

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

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

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

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

这将解决问题，在这里您无需使用DomSanitizer。它对我的工作

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

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>

并且不要忘记在模块中声明指令。

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

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