Angular2材质响应Sidenav和flex-layout

您可以考虑使用 @angular/flex-alyout ObservableMedia来监视媒体/断点更改,并根据活动媒体级别相应地更新模式或其他属性.这是通过订阅注入的ObservableMedia服务实例并检查活动媒体级别来完成的.然后,您可以绑定< md-sidenav>的已打开和模式 properties.通过单向[]绑定到您的类属性.如果需要,可以将此逻辑放入服务和/或属性指令中.

使用/更新properties而不是应用CSS更改将确保发生正确的动画.

TS：

import { Component } from '@angular/core';
import { MediaChange,ObservableMedia } from "@angular/flex-layout";

@Component({ ... })
export class AppComponent  {
  mode: string = 'side';
  opened: boolean = true;

  constructor(private media: ObservableMedia) {
    this.media.subscribe((mediaChange: MediaChange) => {
      this.mode = this.getMode(mediaChange);
      // this.opened = this.getOpened(mediaChange);
    });
  }

  private getMode(mediaChange: MediaChange): string {
    // set mode based on a breakpoint
    if (this.media.isActive('gt-sm')) {
      return 'side';
    } else {
      return 'over';
    }
  }

  // open/close as needed
  private getOpened(mediaChange: MediaChange): string { }
}

HTML：

<md-sidenav-container class="example-container">
  <md-sidenav #sidenav class="example-sidenav" [opened]="opened" [mode]="mode">
    Jolly good!
  </md-sidenav>

  <div class="example-sidenav-content">
    <p>Sidenav content</p>

    <button type="button" md-button (click)="sidenav.open()">
      Open sidenav
    </button>
  </div>

</md-sidenav-container>

希望这有帮助！