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

问题描述

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

I do not understand what is written in the code (isHandset$ | async)please explain

推荐答案

'Handset'是angular material layout的断点名称之一.断点名称列表为 Handset、Tablet、Web、HandsetPortrait、TabletPortrait、WebPortrait、HandsetLandscape、TabletLandscape、WebLandscape.

'Handset' is one of the breakpoint names of angular material layout. The list of breakpoint names is Handset, Tablet, Web, HandsetPortrait, TabletPortrait, WebPortrait, HandsetLandscape, TabletLandscape, WebLandscape.

请查看https://material.io/design/layout/响应式布局网格.html#breakpoints 了解更多关于材质布局断点的信息

Please check https://material.io/design/layout/responsive-layout-grid.html#breakpoints for more information about material layout breakpoints

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

In your example above, isHandset$ is coming from the corresponding component .ts file. Please look for code similar to below in your component file.

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

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

When you resize the browser and when browser width matches with handset (mobile phone screen) width isHandset$ sets to true. ! (isHandset$ | async) in turn sets 'opened' attribute of sidenav drawer to false and collapses the sidenav drawer.

由于 isHandset$ 是一个 Observable 属性，因此 'async' 管道用于异步调用.

As isHandset$ is an Observable property, therefore 'async' pipe is used for the asynchronous call.

这篇关于Angular mat-sidenav 属性 isHandset$ |异步解释的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！