Angular - 如何防止导航标题下拉列表中的 <a href="#"> 重定向到主页答案

【问题标题】：Angular - How to prevent <a href="#"> on the Nav header dropdown from redirecting to Home PageAngular - 如何防止导航标题下拉列表中的 <a href="#"> 重定向到主页
【发布时间】：2022-01-07 20:34:07
【问题描述】：

在我的 Angular-13 项目中，当用户成功登录时，他会被重定向到仪表板。然后在仪表板导航标题上，用户可以注销：

header.component.ts：

signOut() {
 this.router.navigate(['/auth'])
}

header.component.html：

<li class="nav-item dropdown user-menu">
  <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">
    <img src="assets/img/user2-160x160.jpg" class="user-image img-circle elevation-2" alt="User Image">
    <span class="d-none d-md-inline">Alexander Pierce</span>
  </a>
  <ul class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
    <!-- User image -->
    <li class="user-header bg-primary">
      <img src="assets/img/user2-160x160.jpg" class="img-circle elevation-2" alt="User Image">
    </li>
    <!-- Menu Footer-->
    <li class="user-footer">
      <a href="#" class="btn btn-default btn-flat">Profile</a>
      <a class="btn btn-danger btn-flat float-right" (click)="signOut()">Sign out</a>
    </li>
  </ul>
</li>

我希望当我点击 nav-item dropdown user-menu 时，它应该会下拉并显示注销。然后用户应该能够退出。

而不是它重定向到主页。

当我将 # 更改为 javascript: void(0);下拉菜单没有响应。

我该如何解决这个问题？

谢谢

【问题讨论】：

这可能是一个愚蠢的建议，但它在 angularjs 中对我产生了影响 - 省略锚链接上的值，<a href (click)="something()">...
删除href
@Andres2142 - 我删除了 href 并且它不再可点击。也没有解决问题
为什么不在锚标签中使用 routerLink？

标签： javascript angular

【解决方案1】：

如果你想再次加载相同的页面，你可以使用句号代替#，

 &lt;a href="." class="btn btn-default btn-flat"&gt;Profile&lt;/a&gt;

【讨论】：