Angular2 Material 响应式 Sidenav 和 flex-layout

Question

我可以使用 opened 属性或 open() 方法和 flex-layout responsive api 让我的 mat-sidenav 响应吗？喜欢<mat-sidenav #sidenav mode="side" opened="true" [fxFlex.xs]="sidenav.close()">

Answer 1

一种方法是使用 flex 来处理 css 中的响应性，方法是根据它是打开还是关闭给你的 mat-sidenav class。

<mat-sidenav [ngClass]="sidenav.opened ? 'sideOpened' : 'sideClosed'">

.css

    .sideOpened {
    // Handle Responsiveness
    }
    .sideClosed {
    // Handle Responsiveness
    }

Answer 2

您可以考虑通过 [] 绑定到您的 class 属性的一种方式使用 @angular/flex-alyout ObservableMedia to watch for media/breakpoint changes and update the mode or other properties accordingly depending on the active media level. This done by subscribing to an injected ObservableMedia service instance and checking the active media level. You can then bind opened and mode properties of <md-sidenav>。如果需要，可以将此逻辑放入服务 and/or 属性指令中。

Using/updating 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>

Answer 3

@AlexanderStaroselsky 的回答很好，但 outdated/deprecated 对于较新的版本。

他说如果你用flex-layout you can use MediaQueries from responsive API:

TS:

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

@Component({
    selector: 'app-component',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent  {
  sidenavMode: string = 'side';

  constructor(private media: ObservableMedia) {
    this.media.asObservable().subscribe((mediaChange: MediaChange[]) => {
         this.sidenavMode = this.getMode(mediaChange);
    });
  }

  private getMode(mediaChange: MediaChange[]): string {
     return this.media.isActive('gt-sm') ? 'side' : 'over';
  }

}

HTML:

<mat-drawer-container hasBackdrop="false">
    <mat-drawer [mode]="sidenavMode">
        Sidenav
    </mat-drawer>
    <div>
        Hello world !
    </div>
</mat-drawer-container>

本例中当屏幕宽度小于960px时模式结束。

Angular2 Material 响应式 Sidenav 和 flex-layout

Angular2 Material Responsive Sidenav and flex-layout

angular-material

angular-material2

angular-flex-layout

angular