我可以使用open属性或open()方法和flex-layout响应api来使mat-sidenav响应吗?
与<mat-sidenav #sidenav mode="side" opened="true" [fxFlex.xs]="sidenav.close()">
答案 0 :(得分:9)
您可以考虑使用@angular/flex-alyout ObservableMedia来监视媒体/断点更改,并根据活动媒体级别相应地更新mode
或其他属性。这是通过订阅注入的ObservableMedia
服务实例并检查活动媒体级别来完成的。然后,您可以通过opened
绑定到您的类属性的mode
绑定<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>
希望这有帮助!
答案 1 :(得分:0)
一种方法是使用flex处理css中的响应性,方法是根据mat-sidenav是打开还是关闭来为其提供类。
<mat-sidenav [ngClass]="sidenav.opened ? 'sideOpened' : 'sideClosed'">
的CSS
.sideOpened {
// Handle Responsiveness
}
.sideClosed {
// Handle Responsiveness
}
答案 2 :(得分:0)
@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时,模式将结束。