带有 Angular material 原理图的响应式导航栏

Question

使用https://material.angular.io/guide/schematics，创建导航系统很简单。

ng generate @angular/material:navigation <componenet-name>

生成以下具有组件所需功能的模板

<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>Menu</mat-toolbar>
    <mat-nav-list>
      <a mat-list-item href="#">Link 1</a>
      <a mat-list-item href="#">Link 2</a>
      <a mat-list-item href="#">Link 3</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>thingschain-web</span>
    </mat-toolbar>
    <!-- Add Content Here -->
  </mat-sidenav-content>
</mat-sidenav-container>

它始终使侧边栏在桌面浏览器中保持打开状态。它还会适当地关闭移动设备上的侧边栏。到目前为止，这正是我想要的。但是在移动浏览器上，我希望侧边栏在任何 mat-list-item 上的点击事件关闭。

在mat-nav-list中添加如下所示的点击事件会关闭侧边栏

    <mat-nav-list (click)="drawer.close()">
      <a mat-list-item href="#">Link 1</a>
      <a mat-list-item href="#">Link 2</a>
      <a mat-list-item href="#">Link 3</a>
    </mat-nav-list>

但我希望它只在移动浏览器上关闭，所以尝试过：

(click)="(isHandset$ | async) ? drawer.close() : drawer.open()"

并低于错误

Parser Error: Cannot have a pipe in an action expression at column 15 in [(isHandset$ | async) ? drawer.close()] in /path/to/component/html/template

Answer 1

你走在正确的轨道上。在这种情况下，我要做的是订阅可观察对象并跟踪不可观察变量中的值。如果可以的话，我尽量让事情保持可观察的状态，但在这种情况下，我会这样处理。

constructor() {
    this.isHandset$.subscribe(isHandset => this.isHandset = isHandset)
}

(click)="isHandset ? drawer.close() : drawer.open()"

带有 Angular material 原理图的响应式导航栏

Responsive navbar with Angular material schematics

angular-material

angular