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

【问题标题】：md-sidenav responsive, with Flex-Layoutmd-sidenav 响应式，带有 Flex-Layout
【发布时间】：2017-12-02 14:52:35
【问题描述】：

我使用 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>

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

【问题讨论】：

标签： angular responsive angular-flex-layout

【解决方案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 }

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

【讨论】：