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，Tablet，Web，HandsetPortrait，TabletPortrait，WebPortrait，HandsetLandscape，TabletLandscape，WebLandscape。

请检查http://blog.llvm.org/2017/08/llvm-on-windows-now-supports-pdb-debug.html，以获取有关材料布局断点的更多信息

在上面的示例中，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属性，因此“ async”管道用于异步调用。

角形mat-sidenav属性isHandset $ |异步解释

1 个答案: