防止 Angular 2 将 <a href="#"> 重定向到主页答案

【问题标题】：Prevent angular 2 from redirecting <a href="#"> to homepage防止 Angular 2 将 <a href="#"> 重定向到主页
【发布时间】：2018-01-21 22:13:14
【问题描述】：

我有一个指向仪表板的示例登录页面。登录页面设置为初始重定向页面，并路由到仪表板。仪表板包含一个带有一些链接的下拉菜单。每次单击链接时，它都会不断重定向到登录页面。但是，当仪表板页面重新加载时，下拉菜单完全可以正常工作。

我正在考虑为链接使用“event.preventDefault()”，但我希望有一个解决方法。

仪表板菜单 - 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>

编辑：在得到一些回复后，我想澄清一下我的主要问题。问题存在于链接为空链接，并且 Angular 2 将其作为空链接并导致它重定向它。如果我能找到一种解决方法来告诉 Angular，请不要将此链接视为空链接，这将是理想的。

【问题讨论】：

试试下面的代码<a href="javascript:void(0);" onclick="return false;" ngclick="Your function()">
@AniketV 您好，感谢您的回复，但它仍然会重定向到主页。
请输入您的代码
请分享您的仪表板菜单代码。看起来您在仪表板上有一个可能会自动提交的表单。
我已添加仪表板菜单 HTML 代码。如果还有什么我应该补充的，请告诉我。

标签： javascript angular angular2-routing

【解决方案1】：

<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>
        <!-- /.nav-second-level -->
      </li>
    </ul>
  </div>

export const routes: Routes = [ { path: 'ManageEvents/LoremIpsum', component: ManageEventsLoremIpsum } ];

【讨论】：

您好，感谢您的回复。我确实尝试过“javascript: void(0);”但它使链接无法点击。

【解决方案2】：

如果您在单击链接时不希望进行任何重定向，请查看以下解决方案：

Different methods to make a null link?

或者你可以把<a>标签不带href属性。

【讨论】：

您好，感谢您的回复。我尝试删除链接中的 href 属性。它继续不可点击，但不会展开菜单。
这不起作用。删除 href=# 使元素不可点击

【解决方案3】：

这对我有用！！

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

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

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

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

【讨论】：

您好，感谢您的回复。但问题仍然存在。
嗯，这很奇怪。我还在 a-tag 中添加了 ng-click，但我不认为它会有所作为。得知此解决方案无法解决您的问题，我们深感抱歉。

【解决方案6】：

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

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

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

【讨论】：

【解决方案7】：

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

【讨论】：