Угловое свойство mat-sidenav isHandset$ | асинхронное объяснение

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

"Трубка" - это одно из названий точек останова углового расположения материала. Список имен точек останова: "Телефонная трубка", "Планшет", "Интернет", "Порт телефонной трубки", "Планшетный порт", "Веб-портрейт", "HandsetLandscape", "Таблеточный ландшафт", "Веб-ландшафт"

Пожалуйста, проверьте https://material.io/design/layout/responsive-layout-grid.html для получения дополнительной информации о точках останова макета материала

В приведенном выше примере isHandset$ исходит из соответствующего компонента.ts файла. Пожалуйста, найдите код, подобный приведенному ниже, в вашем файле компонента.

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

Когда вы изменяете размер браузера и когда ширина браузера совпадает с размером трубки (экрана мобильного телефона), isHandset$ устанавливает значение true. ! (isHandset$ | async), в свою очередь, устанавливает атрибут "открыл" в блоке sidenav для false и сворачивает блок sidenav.

Поскольку isHandset$ является свойством Observable, следовательно, для асинхронного вызова используется асинхронный канал.

Answer 2

Что касается комментария @MuhammadMehdi :

      [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"

используется для доступности. Людям с ограниченными возможностями и, например, слепым необходимо использовать программу чтения с экрана, для этой цели они добавляют роль «диалог» на маленьком размере экрана (потому что меню всплывает как диалог) и роль «навигация» на рабочем столе. размер, потому что он всегда отображается и используется для навигации.

Здесь у вас есть дополнительная информация о ролях aria https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles .