Angular2 Material Responsive Sidenav和flex-layout

Question

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

Answer 1

你可以考虑使用@angular/flex-alyoutObservableMedia观看媒体/断点修改和更新mode或其他性质相应地取决于活性介质水平。这通过订阅注入的ObservableMedia服务实例并检查活动媒体级别来完成。然后，您可以通过绑定到您的类属性的一种方式将opened和modeproperties的<md-sidenav>绑定到一个方法[]。如果需要，可以将此逻辑放入服务和/或属性指令中。

使用/更新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 2

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

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

的.css

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