在Angular 6中如何使用鼠标中键？

Question

如何在Angular 6中使用鼠标中键在新标签页中打开路由链接？ 我希望每个链接都在新标签页中打开。 例如： 编辑

- Alex

---

要在新标签页中打开链接，您必须将 target="_blank" 添加到 href 中。对于中间点击，这将默认打开到新标签页（由浏览器处理，而不是网页）。不确定这个问题在问什么。 - David Lee

@DavidLee 这些不是 href，它们是 <button> 元素，没有 target 属性。 - nevada_scout

Answer 1

事件是指当在一个元素上按下并释放任意非左键的鼠标按钮时触发的。

<button mat-icon-button color="accent" [routerLink]="['/edit', a.Id]" 
  (auxclick)="onClick($event)">
          <mat-icon>edit</mat-icon>
</button>

component.ts

onClick(e){
   e.preventDefault();
   if(e.which==2){
     window.open('/users/'+a.Id);
   }

}

- Chellappan வ

---

e.which已被弃用，现在应使用e.button来确定您单击了哪个按钮。https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button - Murat

Answer 2

<a  (click)="open(a.Id,$event)" href="/edit/{{item.Id}}" target="_blank">
  <mat-icon>edit</mat-icon>
</a>

然后

 open(id: number, event: MouseEvent) {
    // prevent href to fire.
    // href will work only for middle mouse button click
    event.preventDefault(); 

    // open in new tab when click + ctrl
    if (event.ctrlKey) {
      return window.open('/edit/' + id, '_blank')
    }


     this.router.navigate(['/userAd', id]);
    
  }

- user4649102

---

当您需要同时使用按钮和<a>的功能时，此功能非常有用。 - Amir