Angular2 Material Responsive Sidenav 和 flex-layout答案

【问题标题】：Angular2 Material Responsive Sidenav and flex-layoutAngular2 Material Responsive Sidenav 和 flex-layout
【发布时间】：2018-03-23 06:33:50
【问题描述】：

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

【问题讨论】：

标签： angular angular-material angular-material2 angular-flex-layout

【解决方案1】：

您可以考虑使用@angular/flex-alyout ObservableMedia 来监视媒体/断点更改并根据活动媒体级别相应地更新mode 或其他属性。这是通过订阅注入的ObservableMedia 服务实例并检查活动媒体级别来完成的。然后，您可以通过[] 绑定到您的类属性的一种方式将<md-sidenav> 的opened 和mode 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>

【讨论】：

【解决方案2】：

一种方法是使用 flex 处理 css 中的响应性，方法是根据其打开还是关闭为 mat-sidenav 提供一个类。

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

.css

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

【讨论】：

【解决方案3】：

@AlexanderStaroselsky 的答案很棒，但对于较新的版本已过时/不推荐使用。

正如他所说，如果您使用flex-layout，您可以使用来自responsive API 的MediaQueries：

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 时，模式将结束。

【讨论】：