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 并将 show/hide相应的sidenav。

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

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

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

md-sidenav 响应式，带 Flex-Layout

md-sidenav responsive, with Flex-Layout

angular

responsive

angular-flex-layout