Question

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.

Answer 1

如果您在点击链接时不想要任何重定向，请查看以下解决方案：

Different methods to make a null link?

或者您可以将<a>标记设为href属性。

Answer 2

IBOutlet

<div class="sidebar-nav navbar-collapse"> <ul class="nav" id="side-menu"> <li> <a href="javascript: void(0);"><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 [routerLink]="['ManageEvents/LoremIpsum']">Lorem Ipsum</a> </li> <li> <a [routerLink]="['ManageEvents/LoremIpsum']>Lorem Ipsum</a> </li> </ul>  </li> </ul> </div>

Answer 3

这对我有用！

createLerp

希望这有助于链接也以此方式工作

Answer 4

只需使用<a href>Lorem Ipsum</a>。

Answer 5

对我来说，我使用了 routerLink 并将其设置为空：

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

Answer 6

在父组件收到来自子组件的事件后，我遇到了一种情况，它重定向到主页。我解决了父母的问题

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

即使是父路由也应该接受参数。

Answer 7

尝试删除 href，使用 css 设置 cursor: pointer 并处理对 a 元素（如 <a (click)=yourFunction()></a>）的点击。它应该工作;)

防止角度2重定向<a href="#"> to homepage

7 个答案: