折りたたみリスト付きAngular2 sidenav：サブリストを1つだけ開いておく

Question

ここでは、Angular 2、TypeScript、Material Designコンポーネントを使用してsidenavデモを動作させています。 sidenavにはULがあり、UL内のサイトとユーザーのアンカーが展開され、それぞれのサブリストが表示されます。

Plunker here

ここsidenavのHTMLです：

<md-sidenav #start mode="over" class="sideDrawer"> 
    <ul class="sidenav"> 
     <li><a>Dashboard</a></li> 
     <li> 
     <a (click)="sideNavClick()">Sites</a> 
      <div> 
      <ul *ngIf="clickedSites" class="sublist"> 
       <li><a (click)='sideNavAlert()'>All Sites</a></li> 
       <li><a>Site Groups</a></li> 
      </ul> 
      </div> 
     </li> 
     <li> 
     <a (click)="sideNavClickUser()">Users</a> 
      <div> 
      <ul *ngIf="clickedUsers" class="sublist"> 
       <li><a (click)="sideNavAlert()" >Add User</a></li> 
       <li><a>Edit User</a></li> 
       <li><a>Remove User</a></li> 
      </ul> 
      </div> 
     </li> 
     <li> 
      <a>Lights</a> 
     </li> 
     <li><a>Settings</a></li> 
    </ul> 
</md-sidenav> 

これが私の解決策の非常に単純な実装ですが、私の本当のsidenavはsidenavでより多くのナビゲーションオプションを持つことになりますし、すべての意志子供を見せたり、隠したりする必要があります。しかし、一度に1つのサブリストしか表示されません。私はすべてのサブリストに対してブール値を持たせたくないし、* ngIfを使ってそれを表示したり非表示にしたり、ブール値を反転させるコンポーネントにいくつかのマスター関数を持たせたりする。私はよりリーンなものを期待していますが、これについて角度2で可能なことはわかりません。私はおそらくCSSソリューションを行うことができます知っているが、私はまた、個々のリストにブール値を反転するように、私の他の潜在的なソリューションのクラスごとにクラスを追加したりクラスを削除するように強制すると思います。

アイデア/ヒント？

Answer 1

1つの解決策は、（単一の）現在開いているメニューを変数に格納することです。拡張可能なメニュー項目がクリックされるたびに、メニューが閉じる（開いていた場合）か、現在開いているメニューが閉じている間に開きます。

コンポーネント：

export class AppComponent { 
    clicked: string = null; 

    sideNavClick(clicked: string): void { 
     this.clicked = this.clicked == clicked ? null : clicked; 
    } 

    sideNavAlert(): void { 
     alert("sublist item clicked"); 
    } 
} 

とテンプレートファイル：サイドノートとして

<a (click)="sideNavClick('sites')">Sites</a> 
<div> 
    <ul *ngIf="clicked == 'sites'" class="sublist">...</ul> 
</div> 

... 

<a (click)="sideNavClick('users')">Users</a> 
<div> 
    <ul *ngIf="clicked == 'users'" class="sublist">...</ul> 
</div> 

。私は間違いなく、すべての可能性を入力する必要がないようにメニューが自動的に生成されるコンポーネントに配列を作成することをお勧めします。

Here is the modified Plunker。