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

发布时间：2020-12-17 17:34:40 所属栏目：安全来源：网络整理

导读：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$| a

<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)请解释一下

解决方法

‘手机’是角度材质布局的断点名称之一.断点名称列表是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抽屉的“已打开”属性设置为false并折叠sidenav抽屉.

因为isHandset $是一个Observable属性,所以’async’管道用于异步调用.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!