mat-sidenav 在页面加载时打开。我该如何关闭它？

Posted 2023-02-18

【中文标题】mat-sidenav 在页面加载时打开。我该如何关闭它？

【英文标题】：mat-sidenav is open when the page loads. How do I close it?

【发布时间】：2018-11-12 07:25:55

【问题描述】：

mat-sidenav 在页面加载时打开。如何关闭它？

这是我的 html：

<mat-sidenav
    #drawer
    class="sidenav" position="end"
    fixedInViewport="true"
    [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
    [mode]="(isHandset$ | async) ? 'over' : 'side'"
    [opened]="!(isHandset$ | async)">
    <mat-toolbar color="warn">Menu</mat-toolbar>
    <mat-nav-list>
      <a mat-list-item [routerLink] = "['/brands']"> Brands </a>
      <a mat-list-item [routerLink] = "['/variants']"> Variants </a>
    </mat-nav-list>
</mat-sidenav>

另外，当我单击页面中的任意位置时，我希望它关闭（打开时）。目前只有当我点击菜单按钮时它才会关闭。

【参考方案1】：

你可以试试它对我很有效

<mat-nav-list>
  <a mat-list-item [routerLink] = "['/brands']" (click)="drawer.close()"> Brands </a>
  <a mat-list-item [routerLink] = "['/variants']" (click)="drawer.close()"> Variants </a>
</mat-nav-list>

【参考方案2】：

试试下面的，

<mat-sidenav-container class="sidenav-container">
  <mat-sidenav
    #drawer
    class="sidenav"
    fixedInViewport="true"
    [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
    [mode]="(isHandset$ | async) ? 'over' : 'side'"
    [opened]="!(isHandset$ | async)">
    <mat-toolbar color="warn">Menu</mat-toolbar>
    <mat-nav-list>
      <a mat-list-item [routerLink] = "['/brands']"> Brands </a>
      <a mat-list-item [routerLink] = "['/variants']"> Variants </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>Application Title</span>
    </mat-toolbar>
  </mat-sidenav-content>
</mat-sidenav-container>