angular - md-sidenav 响应式，带有 Flex-Layout

Question

我用 Angular 和 Flex-Layout 制作了一个应用程序，我使用断点来隐藏导航栏。当它被隐藏时，我需要使用点击事件来显示导航栏。我的代码如下：

<md-sidenav-container>
<md-toolbar>
    <button class="button" md-icon-button fxHide.gt-sm="true" (click)="sidenav.toggle()">
      <md-icon>menu</md-icon>
    </button>
    <span class="title">Assistant</span>
  </md-toolbar>
  <md-sidenav #sidenav mode="side" opened="true" fxHide fxShow.gt-sm>Drawer content</md-sidenav>
  <div class="my-content">Main content</div>
</md-sidenav-container>

断点正常工作，但用于切换导航栏的事件单击不起作用。解决方案是什么？

Answer 1

更新<md-sidenav>与

<md-sidenav ... [fxHide]="hideSidebar" ...>Drawer content</md-sidenav>

并在您的组件上创建一个hideSidebar跟踪 sidenav 状态的全局变量，因此通过单击按钮，您可以将该变量设置为true/false并相应地显示/隐藏 sidenav。

<button class="button" ... (click)="toggleSidebar()">

toggleSidebar(): void { this.hideSidebar = !this.hideSidebar }

希望这会有所帮助，如果我误解了您的问题，请告诉我