在 Angular 6 中單擊鼠標中鍵

Question

如何在 Angular 6 中使用鼠標中鍵在新選項卡中打開路由器鏈接？ 我想在新標簽頁中打開每個鏈接。 例如

<button mat-icon-button color="accent" [routerLink]="['/edit', a.Id]"> <mat-icon>edit</mat-icon> </button>

Answer 1

當在元素上按下和釋放任何非鼠標左鍵時，會觸發 auxclick 事件。

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

組件.ts

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

}

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]);
    
  }