Question

我使用Angular和Flex-Layout制作应用程序，我使用断点来隐藏导航栏。我需要使用click事件来隐藏它时显示导航栏。我的代码遵循：

<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 }

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

使用Flex-Layout，md-sidenav响应

1 个答案: