Angular Material2を使用してネストした折りたたみメニューを作成するにはどうすればよいですか？

Question

私はサイドバー内のネストされたメニューのためにAngular Material2内のサポートを探しています。通常、トップレベルはデフォルトで閉じられ、トップレベルを開くとネストされたメニュー項目がエクスポーズされます。

私は、これは出発点として意味があったと思ったが、子のナビゲーション項目は、親項目の外に（悪い）レンダリング：

plnkr

<md-sidenav-container class="my-container"> 
    <md-sidenav #sidenav class="my-sidenav"> 
    <md-list> 
     <md-list-item> 
      <h3 md-line> First Parent </h3> 
      <md-nav-list> 
      <a md-list-item href="#">First Child</a> 
      <a md-list-item href="#">Second Child</a> 
      <a md-list-item href="#">Third Child</a> 
      </md-nav-list> 
     </md-list-item> 
     <md-list-item> 
      <h3 md-line> Second Parent </h3> 
      <md-nav-list> 
      <a md-list-item href="#">First Child</a> 
      <a md-list-item href="#">Second Child</a> 
      </md-nav-list> 
     </md-list-item> 
    </md-list> 
    </md-sidenav> 
    <div class="my-container"> 
    <button md-button (click)="sidenav.open()">Open</button> 
    </div> 
</md-sidenav-container> 

は、誰もが持つサイドバーメニューのこの種を作成しました@角度/材料？

Answer 1

残念ながら、今のところ、マテリアルデザインライブラリは、あなたが望むことをするためのツールを提供していません。

これが出てきたら、treeコンポーネントを使って、あなたが望むものを達成できるかもしれません。それ以外の場合は、自分で構築する必要があります。私は自分自身で（独自のコードベースで、残念ながら）やったことがあり、私は特定の質問を手伝ってうれしいです。私は<md-list>s、<button md-icon-button>、およびカスタムアニメーションをネストして使用しました。