Angular routerLink 和 CTRL+单击/鼠标中键答案

【问题标题】：Angular routerLink and CTRL+Click/Mouse middleclickAngular routerLink 和 CTRL+单击/鼠标中键
【发布时间】：2021-04-19 01:00:41
【问题描述】：

我正在使用 routerLink

构建一个带有导航功能的 Angular 应用

一切正常，但我希望能够通过单击 CTRL+单击 或 鼠标中键 在新选项卡中打开某些内容。

有人可以告诉我这是否可能，或者最聪明的方法是什么？我在网上搜索了很多，但没有真正找到解决方案。

谢谢你们！

【问题讨论】：

这能回答你的问题吗？ Angular 2 Routing run in new tab
@MichaelD 这不是答案，因为这是使用自定义链接指令，我想继续使用角度 routerLink
自定义指令可能是唯一的选择，因为 Angular RouterLink 可能无法以您想要的方式使用。

标签： angular router directive angular-routerlink

【解决方案1】：

RouterLinkWithHref 指令专门检查 ctrl+click 并且什么都不做： https://github.com/angular/angular/blob/11.2.7/packages/router/src/directives/router_link.ts#L375-L380

为了解决这个问题，我添加了自己的扩展 RouterLinkWithHref 的指令，使其在新窗口中使用 ctrl+click 打开：

import { Directive } from '@angular/core';
import { RouterLinkWithHref } from '@angular/router';

@Directive({
    selector: 'a[routerLink],area[routerLink]'
})
export class CtrlClickRouterLinkDirective extends RouterLinkWithHref {
    onClick(button: number, ctrlKey: boolean): boolean {
        if (ctrlKey && button === 0) {
            window.open(this.urlTree.toString(), '_blank');
        }
        return true;
    }
}

【讨论】：

【解决方案2】：

您可以扩展 RouterLink 并放置您的自定义事件处理程序

import { Directive, HostListener } from '@angular/core';
import { RouterLink } from '@angular/router';

@Directive({
 selector: '[routerLink]'
})
export class RouterLinkDirective extends RouterLink {
 @HostListener('mouseup', ['$event'])
 triggerCustomClick(ev: MouseEvent) {
  if (ev.button  === 1 || (ev.ctrlKey && ev.button === 0)) {
    window.open(this.urlTree.toString(), '_blank')
 }
}
 // Preventing the default scroll by movement
 @HostListener('mousedown', ['$event'])
 preventMiddleClickScroll(ev: MouseEvent) {
  if (ev.button  === 1) {
    ev.preventDefault();
  }
 }
}

【讨论】：

我在声明组件的同一模块中声明了它，但它没有覆盖原始指令。

【解决方案3】：

我遇到了同样的问题，我发现我没有将routerLink 指令添加到a 标记中。 “在新标签中打开”功能由浏览器提供，具体取决于您的操作系统（例如，手机需要长按，在菜单中，您可以选择在新标签中打开）。但这仅在您将 routerlink 添加到 a 标记时才会发生，因为它只会在那时创建 href 属性。

所以解决方案就是简单地将 routerlink 放在 a 标签上，一切都按预期工作（我认为网络爬虫会更容易找到链接）。

<a routerLink="/my-link" class="button"> ACTION </a>

【讨论】：