在 Angular 6 中单击鼠标中键

Question

How to open routerlinks in a new tab with middle click mouse in Angular 6? I want to open every link in a new tab. for example

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

Answer 1

The auxclick event is fired when a any non-left mouse button has been pressed and released on an element.

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

}

Answer 2

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

and then

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