typescript 我在Angular应用程序中有一个锚标签,上面有[routerLink],为什么右键单击时,浏览器上下文菜单没有在新选项卡中打开?

lb3vh1jj  于 2023-02-25  发布在  TypeScript
关注(0)|答案(1)|浏览(103)

标记如下所示:

<a class="someClass"[routerLink]="[PATH, item.id]" [queryParams]="{category: item.parent.category, childItem:item.parent.childItem}">{{item.parent.name}}</a>

我尝试添加点击事件与功能,我尝试添加目标="_blank”的一些原因,它不像一个链接的行为。我猜这是因为内部路由,但不太确定。我是新的Angular ,hovewer我只找到答案,如何打开新的标签马上或在新的窗口,而不是如何允许在新的标签或窗口中打开右键与浏览器内置在上下文窗口。

x7yiwoj4

x7yiwoj41#

您可以将(click)事件处理程序添加到锚标记,并在该事件处理程序中使用window.open()方法在新选项卡或窗口中打开链接。

<a class="someClass" [routerLink]="[PATH, item.id]" [queryParams]="{category: item.parent.category, childItem:item.parent.childItem}" (click)="openLinkInNewTab($event)">
  {{item.parent.name}}
</a>

在组件类中,可以定义openLinkInNewTab()方法,以便在新标签或窗口中打开链接:

openLinkInNewTab(event: MouseEvent) {
  event.preventDefault();
  const url = this.router.createUrlTree(this.routerLink, { queryParams: this.queryParams }).toString();
  window.open(url, '_blank');
}

相关问题