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中就不正常了。

当用户点击主菜单(学校管理)时，它应该作为树视图下拉并显示子菜单:

学校管理

• 用户访问概述
用户

但是没有这个，它进入了主页。

会不会是因为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>