angular-material - Angular mat-sidenav 属性 isHandset$ | 异步解释

Question

<mat-sidenav-container class="sidenav-container">
  <mat-sidenav #drawer class="sidenav" fixedInViewport="true" [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
    [mode]="(isHandset$ | async) ? 'push' : 'push'" [opened]="!(isHandset$ | async)">
    <mat-toolbar color="primary">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>

我不明白代码中写了什么(isHandset$ | async)请解释

Answer 1

'Handset' 是角材料布局的断点名称之一。断点名称列表为 Handset、Tablet、Web、HandsetPortrait、TabletPortrait、WebPortrait、HandsetLandscape、TabletLandscape、WebLandscape。

请查看https://material.io/design/layout/responsive-layout-grid.html#breakpoints了解有关材质布局断点的更多信息

在上面的示例中， isHandset$ 来自相应的组件 .ts 文件。请在您的组件文件中查找类似于以下的代码。

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

当您调整浏览器大小并且浏览器宽度与手机（手机屏幕）宽度匹配时，isHandset$ 设置为 true。！(isHandset$ | async) 依次将 sidenav 抽屉的 'opened' 属性设置为 false 并折叠 sidenav 抽屉。

由于 isHandset$ 是 Observable 属性，因此“异步”管道用于异步调用。