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

Question

当用户单击链接时，我正在尝试打开一个新页面。我不能使用 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 时？

原文由 Varun 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

 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>

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

原文由 Uğur Dinç 发布，翻译遵循 CC BY-SA 4.0 许可协议