Question

我尝试在用户点击链接时打开新页面。我无法使用Angular 2路由器，因为它没有任何功能可以重定向到外部网址。

所以，我使用window.location.href =＆＃34; ...＆＃34;;

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？

Answer 1

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

Answer 2

使用window.open()时的一个警告是，如果您传递给它的网址前面没有http://或https://，则angular会将其视为路线。< / p>

要解决此问题，请测试网址是以http://还是https://开头，如果不是则附加。

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

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

Answer 3

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

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

Answer 4

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

带有${_spPageContextInfo.webAbsoluteUrl}的SharePoint解决方案

HTML：

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

TypeScript：

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

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

Answer 5

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

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

Answer 6

在HTML中：

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

OR

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

Answer 7

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

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>

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

Answer 8

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

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

Answer 9

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

这将解决问题，在这里您无需使用DomSanitizer。对我来说有用

Angular 2 - 重定向到外部网址并在新标签页

9 个答案: