각도 재료 2로 중첩 된 축소 메뉴를 만드는 방법은 무엇입니까?

Question

사이드 바 내의 중첩 된 메뉴에 대한 각도 재료 2 내의 지원을 찾고 있습니다. 일반적으로 최상위 수준은 기본적으로 닫히고 최상위 수준을 열면 중첩 된 메뉴 항목이 노출됩니다.

나는이 출발점으로 이해했다 생각했지만, 자식 탐색 항목은 부모 항목의 외부 (제대로) 렌더링 :

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> 및 맞춤 애니메이션을 사용했다.