сохранить клик состояние фиксированного левого меню

Question

У меня есть боковая навигация с боковым меню. Когда я нажимаю что-то в меню, соответствующие данные отображаются справа.

В меню есть подменю, поэтому, когда я нажимаю подменю меню, также видны.

Теперь, когда я перезагружаю страницу, я могу сохранить правильные детали, но подменю скрыты. Как я могу это сохранить.

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> &nbsp; {{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> 

Answer 1

Попробуйте использовать routerLinkActive directive, если й е соответствующая ссылка получает определенный класс, вы можете быть в состоянии предназначаться все остальное, используя этот класс (или даже применить класс к подменю и т.д ...)

Answer 2

Используйте следующий HTML

<div> 
<div class="row"> 
    <div class="col-md-3"> 
     <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> &nbsp; {{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 [routerLink]="['...']"><span>{{dataConfiguration.name}}</span></a> 
          </li> 
         </ul> 
        </li> 
       </div>  
      </ul> 
     </nav> 
    </div> 
    <div class="col-md-9"> 
     <router-outlet> </router-outlet> 
    </div> 
</div> 

Определите ваш маршрутов в файле appmodule.ts.

Согласно вашему комментарию ниже, обработка переключения между меню невозможна во время обновления страницы. У вас могут быть свойства для соответствующего меню в ваших тенетах, чтобы сохранить состояние. Однако после обновления страницы компоненты загружаются как раньше. Таким образом, ваши данные будут потеряны.

Это возможно, только если вы используете механизмы сохранения состояния, которые являются накладными расходами для просто расширения щелчка меню.