Prevent angular 2 from redirecting <a href="#"> to homepage

user_7879827 0
Viewed 11615

I have a sample login page which directs to a dashboard. The login page is set as the initial redirect page and this routes to the dashboard. The dashboard contains a dropdown menu with some links. Everytime a link is clicked it keeps redirecting to the login page. However, when the dashboard page is reloaded the dropdown menu works completely fine.

I am thinking of using the "event.preventDefault()" for the links but I hope there is a workaround.

Dashboard Menu - HTML

<div class="navbar-default sidebar" role="navigation">
  <div class="sidebar-nav navbar-collapse">
    <ul class="nav" id="side-menu">
      <li>
        <a href="#"><i class="fa fa-calendar fa-fw"></i> Manage Events<span class="fa arrow"></span></a>
        <ul class="nav nav-second-level collapse">
          <li>
            <a href="#">Lorem Ipsum</a>
          </li>
          <li>
            <a href="#">Lorem Ipsum</a>
          </li>
        </ul>
        <!-- /.nav-second-level -->
      </li>
    </ul>
  </div>
  <!-- /.sidebar-collapse -->
</div>

Edit: After getting some replies, I would like to clarify my main problem.The problem exists in the link being a null link and that Angular 2 takes it as a null link and causes it to redirect it. If I could find a workaround to tell Angular, don't take this link as a null link it will be ideal.

angular2-routing angular javascript
7 Answers

This works for me!!

<a href="" onclick="return false;">link</a>

hope this helps link also working by this way

user_78828860

For me I used the routerLink and set it to empty:

<a [routerLink]="" (click)="onClickPage()">Click me</a>
user_45944520

I had a situation after parent received events from child component, it redirect to homepage. I solved the problem in parent

receiveMessage($event) { //do something this.router.navigateByUrl('/parent-route'); }

even the parent route are supposed to accept parameters.

user_22089090

try to remove href, setting cursor: pointer with css and handle click on th a element like <a (click)=yourFunction()></a>. it should work ;)

user_135188050
Related