固定された左メニューのクリック状態を保存します

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ファイル内のルート。

以下のご意見に基づき、ページの更新中にメニュー間の切り替えを行うことはできません。それぞれのメニューのプロパティをtenatntsに設定すると、状態を保持できます。ただし、ページをリフレッシュした後は、以前と同じようにコンポーネントが新しく読み込まれます。したがって、あなたのデータは失われます。

これは、メニューのクリック展開のオーバーヘッドである状態保持メカニズムを使用している場合にのみ可能です。