如何使用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>和自定義動畫。