側導航將不會打開模板參考變量

Question

好的。這是困擾我。 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內使得無論工作。

文檔說，你應該能夠從任何地方模板引用模板變量。有任何想法嗎？

Answer 1

你可能會面臨在sidenav是開放的問題，而是因爲你沒有正確設置sidenav容器的高度，你看不到效果。

嘗試使用一些CSS設置sidenav容器的高度。例如：

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。