Angular母方的属性是handset$ |金奇解释
Angular mat-sidenav property isHandset$ | async explain
<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'是angular material布局的断点名之一。断点名称列表是 Handset、Tablet、Web、HandsetPortrait、TabletPortrait、WebPortrait、HandsetLandscape、TabletLandscape、WebLandscape。
请检查 https://material.io/design/layout/responsive-layout-grid.html#breakpoints 以获取有关 material 布局断点的更多信息
在您上面的示例中,isHandset$ 来自相应的组件 .ts 文件。请在您的组件文件中查找类似于以下的代码。
isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset)
.pipe(
map(result => result.matches)
);
当您调整浏览器大小时,当浏览器宽度与手机(手机 phone 屏幕)匹配时,宽度 isHandset$ 设置为 true。 ! (isHandset$ | async) 依次将 sidenav 抽屉的 'opened' 属性设置为 false 并折叠 sidenav 抽屉。
由于 isHandset$ 是一个 Observable 属性,因此 'async' 管道用于异步调用。
<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'是angular material布局的断点名之一。断点名称列表是 Handset、Tablet、Web、HandsetPortrait、TabletPortrait、WebPortrait、HandsetLandscape、TabletLandscape、WebLandscape。
请检查 https://material.io/design/layout/responsive-layout-grid.html#breakpoints 以获取有关 material 布局断点的更多信息
在您上面的示例中,isHandset$ 来自相应的组件 .ts 文件。请在您的组件文件中查找类似于以下的代码。
isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset)
.pipe(
map(result => result.matches)
);
当您调整浏览器大小时,当浏览器宽度与手机(手机 phone 屏幕)匹配时,宽度 isHandset$ 设置为 true。 ! (isHandset$ | async) 依次将 sidenav 抽屉的 'opened' 属性设置为 false 并折叠 sidenav 抽屉。
由于 isHandset$ 是一个 Observable 属性,因此 'async' 管道用于异步调用。