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

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

0 голосов
/ 04 сентября 2018 
<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), пожалуйста, объясните

1 Ответ

0 голосов
/ 04 сентября 2018

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

Пожалуйста, проверьте 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, поэтому для асинхронного вызова используется асинхронный канал.

...