我正在使用mat-sidenav容器
有没有一种方法可以覆盖断点,以便在屏幕达到一定宽度时不会自动打开抽屉?
当前@ 600px,它会自动打开
我只希望用户单击汉堡包时打开它
超过600像素-保持打开状态
<mat-sidenav-container class="sidenav-container">
<mat-sidenav
#drawer
class="sidenav"
fixedInViewport="false"
[attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
[mode]="(isHandset$ | async) ? 'over' : 'side'"
[opened]="!(isHandset$ | async)">
<mat-toolbar color="primary">Menu</mat-toolbar>
<mat-nav-list *ngFor="let i of navItems">
<a *ngIf="(i.navText) && (i.router) && (i.showYNNav === 'Y')"
mat-list-item [routerLink]="[i.router]">{{i.navText}}</a>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
<mat-toolbar color="primary">
<button
type="button"
aria-label="Toggle sidenav"
mat-icon-button
(click)="drawer.toggle()"
*ngIf="isHandset$ | async">
<mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
</button>
<span>
<a class="mat-toolbar mat-primary homeLink"
[routerLink]="['/']"
routerLinkActive="active"
[routerLinkActiveOptions]="{exact: true}">
<span>Site Name Here</span>
</a>
</span>
</mat-toolbar>
<div class="componentMargin">
<router-outlet #outlet="outlet"></router-outlet>
</div>
<app-footer></app-footer>
</mat-sidenav-content>
</mat-sidenav-container>
在.ts
中isHandset$: Observable<boolean> =
this.breakpointObserver.observe(Breakpoints.Handset)
.pipe(
map(result => result.matches)
);
答案 0 :(得分:0)
当然,您可以在发布问题后立即解决
硬编码属性似乎可以解决问题
而不是使用观察断点的isHandset $ observable
attr.role="dialog"
mode="over"
opened="false"