javascript - How to prevent default click behavior of a routerlink in angular app? - Stack Overflow

admin管理员组

文章数量:1220948

Even though this is not angular specific in theory it needs to be solved in ng app and none of the examples work. I've seen all the answers in SO but none of those solutions seem to work in real life Angular7 app. For example none of the following work :

<!-- option 1 -->
<a class="nav-link" [routerLink]='["/properties", sessionId]'
 (click)="$event.stopPropagation()">Properties
</a>
<!-- option 2 -->
<a class="nav-link" [routerLink]='["/properties", sessionId]'
 (click)="$event.stopPropagation();false">Properties
</a>
<!-- option 3 -->
<a class="nav-link" [routerLink]='["/properties", sessionId]'
 (click)="$event.preventDefault()">Properties
</a>
<!-- option 4 -->
<a class="nav-link" [routerLink]='["/properties", sessionId]'
 (click)="$event.preventDefault();false">Properties
</a>

Creating a method for handler in component.ts and calling either function with or without returning false does not work either.

In addition, I don't want to disable link because it needs to be draggable / openable in other browser tab/window.

EDIT: Here is and I can make it to work by adding an element inside anchor and have the click for the inside element like this:

(click)="$event.stopPropagation();$event.preventDefault()"

My real world example has mat-icon inside anchor so I use that but in link above a span inside is suggested.

Even though this is not angular specific in theory it needs to be solved in ng app and none of the examples work. I've seen all the answers in SO but none of those solutions seem to work in real life Angular7 app. For example none of the following work :

<!-- option 1 -->
<a class="nav-link" [routerLink]='["/properties", sessionId]'
 (click)="$event.stopPropagation()">Properties
</a>
<!-- option 2 -->
<a class="nav-link" [routerLink]='["/properties", sessionId]'
 (click)="$event.stopPropagation();false">Properties
</a>
<!-- option 3 -->
<a class="nav-link" [routerLink]='["/properties", sessionId]'
 (click)="$event.preventDefault()">Properties
</a>
<!-- option 4 -->
<a class="nav-link" [routerLink]='["/properties", sessionId]'
 (click)="$event.preventDefault();false">Properties
</a>

Creating a method for handler in component.ts and calling either function with or without returning false does not work either.

In addition, I don't want to disable link because it needs to be draggable / openable in other browser tab/window.

EDIT: Here is https://github.com/angular/angular/issues/21457 and I can make it to work by adding an element inside anchor and have the click for the inside element like this:

(click)="$event.stopPropagation();$event.preventDefault()"

My real world example has mat-icon inside anchor so I use that but in link above a span inside is suggested.

• javascript
• html
• angular
• typescript
• angular-routing

Share Improve this question Follow edited Jun 12, 2019 at 11:06 char m asked Jun 12, 2019 at 10:28 char mchar m 8,3361717 gold badges7373 silver badges129129 bronze badges 5

• I personally have used return false and it works like a charm. Can you create a plunkr? – Vinod Bhavnani Commented Jun 12, 2019 at 10:32
• thanks for comment! (click)="return false" throws syntaxError in compiler.js TemplateParser. I have tried that also. – char m Commented Jun 12, 2019 at 10:36
• <a href="javascript:void(0)"></a> .Use this. – Ayatullah Rahmani Commented Jun 12, 2019 at 10:53
• @AyatullahRahmani: why would that work? – char m Commented Jun 12, 2019 at 11:10
• 1 What you are probably looking for is the CanDeactivate guard. angular.io/api/router/CanDeactivate – Tim VN Commented Jun 12, 2019 at 11:15

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 19

The reason routerLink does not respect preventDefault is described here.

The solution is to create inner element for anchor if there already isn't one (like icon). In the link above a span is created inside but I have icons inside anchors which I omitted from the question for clarity:

  <a class="nav-link" [routerLink]='["/map", sessionId]'>
    <mat-icon class="tab-nav-item-icon" (click)="$event.stopPropagation();$event.preventDefault()">map</mat-icon>
  </a>

本文标签： javascriptHow to prevent default click behavior of a routerlink in angular appStack Overflow