Angular - 子菜单路由返回主页

Question

我在 Angular-12 和 AdminLTE3 主题中有这个子菜单：

<li class="nav-item">
  <a href="#" class="nav-link">
    <i class="nav-icon fas fa-th"></i>
    <p>
      School Admin
      <i class="right fas fa-angle-left"></i>
    </p>
  </a>
  <ul class="nav nav-treeview">
    <li class="nav-item">
      <a [routerLink]="['/access']" routerLinkActive="active" class="nav-link">
        <i class="nav-icon fas fa-copy"></i>
        <p>User Access Overview</p>
      </a>
    </li>
    <li class="nav-item">
      <a [routerLink]="['/users']" routerLinkActive="active" class="nav-link">
        <i class="nav-icon fas fa-copy"></i>
        <p>Users</p>
      </a>
    </li>
    <li class="nav-item">
      <a [routerLink]="['/role']" routerLinkActive="active" class="nav-link">
        <i class="nav-icon fas fa-copy"></i>
        <p>Role</p>
      </a>
    </li>
  </ul>
</li>

这在纯 HTML 中运行良好，但在 Angular 中表现异常。

当用户点击主菜单（School Admin）时，它会以树状视图的形式下拉并显示子菜单：

学校管理员

• 用户访问概述
• 用户
• 角色

但不是这个，而是转到主页。

可能是因为 href="#" 吗？

我该如何解决这个问题？

谢谢。

Answer 1

试试这个希望对你有帮助

<li class="nav-item">
  <a href="#" class="nav-link" (click)="viewSubMenu=!viewSubMenu">
    <i class="nav-icon fas fa-th"></i>
    <p>
      School Admin
      <i class="right fas fa-angle-left"></i>
    </p>
  </a>
  <ul class="nav nav-treeview" *ngIf="viewSubMenu">
    <li class="nav-item">
      <a [routerLink]="['/access']" routerLinkActive="active" class="nav-link">
        <i class="nav-icon fas fa-copy"></i>
        <p>User Access Overview</p>
      </a>
    </li>
    <li class="nav-item">
      <a [routerLink]="['/users']" routerLinkActive="active" class="nav-link">
        <i class="nav-icon fas fa-copy"></i>
        <p>Users</p>
      </a>
    </li>
    <li class="nav-item">
      <a [routerLink]="['/role']" routerLinkActive="active" class="nav-link">
        <i class="nav-icon fas fa-copy"></i>
        <p>Role</p>
      </a>
    </li>
  </ul>
</li>