小编mot*_*ick的帖子

当用户单击链接时如何隐藏 Angular Material Sidenav

我正在开发一个使用 Material UI 的 Angular 应用程序,我使用 Angular CLI 生成以下代码:

Navigation HTML


<mat-sidenav-container class="sidenav-container">
  <mat-sidenav #drawer class="sidenav" fixedInViewport [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
    [mode]="(isHandset$ | async) ? 'over' : 'side'" [opened]="(isHandset$ | async) === false">
    <mat-toolbar>
      <mat-icon>keyboard_arrow_down</mat-icon> Select
    </mat-toolbar>
    <mat-nav-list>
      <a mat-list-item [routerLink]="['home']">
        <mat-icon>location_on</mat-icon> - Home
      </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>
    </mat-toolbar>
    <!-- Add Content Here -->
    <ng-content></ng-content>
  </mat-sidenav-content>
</mat-sidenav-container>
Run Code Online (Sandbox Code Playgroud)

Navigation TypeScript


import …
Run Code Online (Sandbox Code Playgroud)

navigation typescript angular-material angular

4
推荐指数
1
解决办法
6729
查看次数