我有一個側面導航,它有側面菜單。當我點擊菜單中的某些東西時,相應的細節會顯示在右側。保留固定左側菜單的點擊狀態
該菜單有子菜單,所以當我點擊菜單子菜單也是可見的。
現在,當我重新加載頁面,我能夠保留右側的細節,但子菜單是隱藏的。我怎樣才能保持這一點。
HTML
<nav class="sidebar">
<ul class="list-group" *ngFor="let tenant of tenants ;trackBy: trackId">
<div class="nested-menu">
<a [routerLink]="['../tenant', tenant.id ]" class="list-group-item" (click)="addExpandClass(tenant.id)">
<span><i class="fa fa-th-list"></i> {{tenant.name}}</span>
</a>
<li class="nested" [ngClass]="{'expand' : showMenu === tenant.id }">
<ul class="submenu" *ngFor="let dataConfiguration of tenant.dataConfigurations ;trackBy: trackId">
<li>
<a href><span>{{dataConfiguration.name}}</span></a>
</li>
</ul>
</li>
</div>
</ul>
</nav>
側菜單JS
import { Component, Input } from '@angular/core';
@Component({
selector: 'sidebar-cmp',
templateUrl: 'sidebar.html',
styleUrls: [
'sidebar.scss'
]
})
export class SidebarComponent {
@Input() tenants = 0;
showMenu: string = '';
addExpandClass(element: any) {
if (element === this.showMenu) {
this.showMenu = '0';
} else {
this.showMenu = element;
}
}
}
父HTML
<div class="container-fluid">
<div class="row">
<div class="col-md-2">
<sidebar-cmp [tenants] = "tenants"></sidebar-cmp>
</div>
<div class="col-md-10">
<router-outlet></router-outlet>
</div>
</div>
</div>
您想要在重新加載頁面時顯示子菜單嗎? –
@Kinduser:是的 –