Код угловой схемы материалов, сгенерированный

Question

Я новичок в Angular и не могу найти ничего, что объясняет точное значение этих строк кода, сгенерированного из ng generate @angular/material:material-nav.

Мне, в частности, непонятны следующие строки:

[attr.role]="isHandset ? 'dialog' : 'navigation'"
[mode]="(isHandset | async)!.matches ? 'over' : 'side'"
[opened]="!(isHandset | async)!.matches">

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

Полный HTML-код сгенерированной команды находится здесь:

<mat-sidenav-container class="sidenav-container">
  <mat-sidenav
    #drawer
    class="sidenav"
    fixedInViewport="true"
    [attr.role]="isHandset ? 'dialog' : 'navigation'"
    [mode]="(isHandset | async)!.matches ? 'over' : 'side'"
    [opened]="!(isHandset | async)!.matches">
    <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>
  <mat-sidenav-content>
    <mat-toolbar color="primary">
      <button
        type="button"
        aria-label="Toggle sidenav"
        mat-icon-button
        (click)="drawer.toggle()"
        *ngIf="(isHandset | async)!.matches">
        <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
      </button>
      <span>Application Title</span>
    </mat-toolbar>
  </mat-sidenav-content>
</mat-sidenav-container>

И соответствующий файл .ts:

import { Component } from '@angular/core';
import { BreakpointObserver, Breakpoints, BreakpointState } from '@angular/cdk/layout';
import { Observable } from 'rxjs';

@Component({
  selector: 'newnav',
  templateUrl: './newnav.component.html',
  styleUrls: ['./newnav.component.css']
})
export class NewnavComponent {
  isHandset: Observable<BreakpointState> = this.breakpointObserver.observe(Breakpoints.Handset);
  constructor(private breakpointObserver: BreakpointObserver) {}
}

Answer 1

Точка останова (наблюдатель) в соответствии с данным руководством: https://alligator.io/angular/breakpoints-angular-cdk/

В Angular CDK имеется пакет макетов со службами, которые позволяют легко определять размеры области просмотра и сопоставлять их с медиа-запросами.Это позволяет вам полностью контролировать пользовательский интерфейс и приспосабливаться к различным размерам экрана.

Таким образом, точка останова является поворотной точкой, когда, например, разрешение больше не рассматривается как ландшафтный режим, а в портретном режимеРежим.Или в случае isHandset, когда разрешение достаточно мало, чтобы «официально» считаться трубкой / мобильным устройством.

Observable в isHandset: Observable<BreakpointState> означает, что платформа Angular CDK скорее внедряет поток RXJSчем статическое значение.Поэтому вам нужно подписаться на поток, чтобы получить последнее значение и все последующие обновления.

isHandset | async означает, что используется Angular async-Pipe.Async-pipe автоматически подписывается на поток, возвращает значение, инициирует обнаружение изменений и отписывается от потока (важно отписаться, чтобы избежать утечки памяти).

!. in (isHandset | async)!является ненулевым утверждением, предотвращающим появление ошибки при доступе к свойству, если isHandset еще не имеет значения в потоке.https://angular.io/guide/template-syntax#expression-operators

The!в !(isHandset | async)!.matches отображает логический результат проверки совпадений

evaluation ? ifTrue : ifFalse - это оператор if-else, известный многим языкам программирования.И [что-то] - это способ Angular передавать данные из родительского компонента в дочерний.Таким образом, в результате строка [mode]="(isHandset | async)!.matches ? 'over' : 'side'" передает строковое значение как @Input -конфигурацию модуля в зависимости от того, находитесь ли вы на мобильном телефоне или нет.

Это должны быть все жесткие частив коде.Если у вас есть дополнительные вопросы, не стесняйтесь спрашивать.