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 IS打开的问题，但由于你没有正确设置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

侧面导航不会打开模板引用变量

2 个答案: