我正在使用 routerLink
构建带有导航功能的Angular应用一切正常，但是我想做的就是具有通过单击 CTRL + Click 或鼠标中键在新标签页中打开内容的功能。
有人可以告诉我这是否可行，或者最聪明的方法是什么？我在网上搜索了很多内容，但并没有真正找到解决方案。
谢谢你们！
guojinfei 回答：Angular routerLink和CTRL + Click / Mouse Middleclick
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;
}
}
您可以扩展RouterLink并放置自定义eventHandlers
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();
}
}
}
我遇到了同样的问题，我发现我没有将 routerLink 指令添加到 a 标记中。 “在新标签页中打开”功能由浏览器提供，具体取决于您的操作系统（例如，手机需要长按，在菜单中，您可以选择在新标签页中打开）。但这只会在您将 routerlink 添加到 a 标记时发生，因为它只会在那时生成 href 属性。
因此，解决方案只是将路由器链接放在 a 标签上，一切都按预期工作（我认为网络爬虫会更容易找到链接）。
<a routerLink="/my-link" class="button"> ACTION </a>