侧导航将不会打开模板参考变量

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。