垫-sidenav-容器断点覆盖

时间:2018-09-23 22:18:40

标签: angular angular-material

我正在使用mat-sidenav容器
有没有一种方法可以覆盖断点,以便在屏幕达到一定宽度时不会自动打开抽屉?

600像素以下-显示汉堡包
enter image description here

当前@ 600px,它会自动打开
我只希望用户单击汉堡包时打开它
超过600像素-保持打开状态
enter image description here

  <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)
    );

1 个答案:

答案 0 :(得分:0)

当然,您可以在发布问题后立即解决

硬编码属性似乎可以解决问题
而不是使用观察断点的isHandset $ observable

attr.role="dialog"
mode="over"
opened="false"