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

【问题标题】：How to hide the Angular Material Sidenav when a user clicks a link用户单击链接时如何隐藏 Angular Material Sidenav
【发布时间】：2020-04-07 20:58:23
【问题描述】：

我正在开发一个使用 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>

Navigation TypeScript


import { Component } from '@angular/core';
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
import { Observable } from 'rxjs';
import { map, shareReplay } from 'rxjs/operators';

@Component({
  selector: 'app-navigation',
  templateUrl: './navigation.component.html',
  styleUrls: ['./navigation.component.scss']
})
export class NavigationComponent {

  isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset)
    .pipe(
      map(result => result.matches),
      shareReplay()
    );



  constructor(private breakpointObserver: BreakpointObserver) {}

}

我的问题是我希望导航栏在用户单击链接时关闭（消失）。我该怎么做？ 当用户单击链接时，导航栏保持启用状态。我必须点击背景的某个地方才能让它消失。

【问题讨论】：

标签： angular typescript angular-material navigation

【解决方案1】：

你已经有一个sidenav组件的模板引用#drawer，所以你可以像这样调用toggle方法

 <mat-nav-list (click)="drawer.toggle()">
      <a mat-list-item [routerLink]="['home']">
        <mat-icon>location_on</mat-icon> - Home
      </a>
 </mat-nav-list>

如果我们想要切换小屏幕（移动）的侧边栏底座

组件

  toggle(nav: MatSidenav) {
    const isSmallScreen = this.breakpointObserver.isMatched(
      "(max-width: 599px)"
    );
    if (isSmallScreen) {
      nav.toggle();
    }
  }

模板

 <mat-nav-list (click)="toggle(drawer)">
      <a mat-list-item [routerLink]="['home']">
        <mat-icon>location_on</mat-icon> - Home
      </a>
 </mat-nav-list>

demo ?

【讨论】：

我怎样才能使用它并使其仅用于移动设备？我不想在桌面上使用此功能。 @malbarmavi
检查更新的演示我为此创建了一个切换方法

【解决方案2】：

如果有人想通过@ViewChild 实现它，我将分享下面的代码，因为我已经这样做了。

选定的答案和这个一样有效。

分享下面的代码

在您的 HTML 中

 <mat-nav-list (click)="closeSidebar();">
  <a mat-list-item >
    Link 1
  </a>
</mat-nav-list>

TS 文件内

@ViewChild('drawer', {static: true}) matDrawer: MatSidenav;

closeSidebar() {
   const isHandset= this.breakpointObserver.isMatched(
     "(max-width: 768px)"
   );
   if (isHandset) {
    this.matDrawer.close();
  }
}

【讨论】：