我能否使用opened
属性或open()
方法以及flex-layout
响应式API使我的mat-sidenav
具有响应式设计?例如:<mat-sidenav #sidenav mode="side" opened="true" [fxFlex.xs]="sidenav.close()">
我能否使用opened
属性或open()
方法以及flex-layout
响应式API使我的mat-sidenav
具有响应式设计?例如:<mat-sidenav #sidenav mode="side" opened="true" [fxFlex.xs]="sidenav.close()">
mode
或其他属性,具体取决于活动的媒体级别。这可以通过订阅注入的 ObservableMedia
服务实例并检查活动媒体级别来完成。然后,您可以通过单向绑定 []
将 <md-sidenav>
的 opened
和 mode
属性 绑定到您的类属性。如果需要,此逻辑可以放入服务和/或属性指令中。
使用/更新 属性 而不是应用 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>
<mat-sidenav [ngClass]="sidenav.opened ? 'sideOpened' : 'sideClosed'">
.css
.sideOpened {
// Handle Responsiveness
}
.sideClosed {
// Handle Responsiveness
}
@AlexanderStaroselsky 的回答很好,但对于较新的版本已经过时/弃用。
正如他所说,如果您使用 flex-layout,则可以使用响应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>