Angular material Angular mat sidenav属性isHandset$|异步解释 菜单
我不明白代码Angular material Angular mat sidenav属性isHandset$|异步解释 菜单,angular-material,angular6,sidenav,mat-sidenav,Angular Material,Angular6,Sidenav,Mat Sidenav,我不明白代码(isHandset$| async)中写了什么请解释“手持设备”是角材料布局的断点名称之一。断点名称列表包括手持设备、平板电脑、Web、手持设备肖像、TabletPortrait、Web肖像、手持设备景观、TabletLandscape、Web景观 请查看有关材质布局断点的详细信息 在上面的示例中,isHandset$来自相应的component.ts文件。请在组件文件中查找类似于下面的代码 <mat-sidenav-container class="sidenav-cont
(isHandset$| async)中写了什么
请解释“手持设备”是角材料布局的断点名称之一。断点名称列表包括手持设备、平板电脑、Web、手持设备肖像、TabletPortrait、Web肖像、手持设备景观、TabletLandscape、Web景观
请查看有关材质布局断点的详细信息
在上面的示例中,isHandset$来自相应的component.ts文件。请在组件文件中查找类似于下面的代码
<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$:Observable=this.breakpointObserver.observe(Breakpoints.Handset)
.烟斗(
映射(结果=>result.matches)
);
当您调整浏览器大小以及浏览器宽度与手机(手机屏幕)宽度匹配时,宽度为并将$sets设置为true<强>(isHandset$| async)依次将sidenav抽屉的“opened”属性设置为false,并折叠sidenav抽屉
由于isHandset$是一个可观察的属性,因此异步调用使用“async”管道 这是什么意思?
[attr.role]=“isHandset$| async”?“dialog”:“navigation”
isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset)
.pipe(
map(result => result.matches)
);