テンプレート参照変数でサイドナビゲーションが開かない

Question

OK。これは私を困惑させている。 md-sidenavは、次のテンプレートの#sidenavによって参照されています。しかし、それは何もしません。

<md-toolbar color="primary"> 
    <button type="button" md-button (click)="sidenav.open()"> 
     Open sidenav 
    </button> 
</md-toolbar> 

<md-sidenav-container> 
    <md-sidenav #sidenav class="example-sidenav"> 
    Jolly good! 
    </md-sidenav> 
</md-sidenav-container> 

http://plnkr.co/edit/M8cJTqPKwZwz8UP3dod9?p=preview

興味深いことに、md-sidenav-container内の第2ボタンを配置する作業の両方になります。

ドキュメントによれば、テンプレートのどこからでもテンプレート変数を参照できるはずです。何か案は？

Answer 1

あなたはおそらくsidenavが開いている問題に直面していますが、sidenavコンテナの高さを正しく設定していないため、その効果は見えません。

sidenavコンテナの高さを設定するには、CSSを使用してみてください。次のようなもの：

html, body { 
    width: 100%; 
    height: 100%; 
    display: flex; 
} 

md-sidenav-container { 
    flex: 1; 
} 

md-sidenav { 
    width: 240px; 
} 

Answer 2

ツールバーをコンテナに入れる必要があります。

<md-sidenav-container> 
     <md-toolbar color="primary"> 
     <button *ngIf="!sidenav.opened" type="button" md-button (click)="sidenav.open()"> 
      Open 
     </button> 
     <button *ngIf="sidenav.opened" type="button" md-button (click)="sidenav.close()"> 
      Close 
     </button> 
     </md-toolbar> 
     <md-sidenav #sidenav mode="side" class="example-sidenav"> 
     Jolly good! 
     </md-sidenav> 
     testing 
    </md-sidenav-container> 

http://plnkr.co/edit/MIbzRuM4oUHZZKUZdu30?p=preview。