角材料原理图生成代码

Question

我对棱角很陌生，也找不到任何东西来解释从ng generate @angular/material:material-nav生成的代码行的确切含义。

我特别不清楚以下几句话：

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

更确切地说，这些属性是什么(我在哪里可以看到它们？)，我也不清楚其中的许多词意味着什么，例如，matches或x字符？对文件的任何解释或提及都是有帮助的。

生成的命令的完整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/

角CDK有一个布局包，它可以方便地检测视口大小，并与媒体查询匹配。这允许您完全控制UI和适应不同的屏幕大小。

例如，当分辨率不再被认为是景观模式，而是纵向模式时，断点就是转折点。或者在isHandset的例子中，当分辨率小到可以“正式”被认为是手机/移动设备的时候。

Observable in isHandset: Observable<BreakpointState>意味着角CDK框架注入一个RXJS流，而不是一个静态值。因此，您需要订阅流，以获得最后的值和所有后续更新。

isHandset | async的意思是角的异步管道正在被使用.异步管道自动订阅流、返回值、触发更改检测和从流取消订阅(取消订阅对于避免内存泄漏非常重要)。

!. in (isHandset =异步)！是一个非空断言，如果isHandset在流中没有值，则防止在访问属性时引发错误。https://angular.io/guide/template-syntax#expression-operators

那个！在!(isHandset | async)!.matches中翻转匹配检查的布尔结果。

evaluation ? ifTrue : ifFalse是许多编程语言都知道的if-否则运算符。一些东西是把数据从父组件到子部件的角度的方式。因此，根据您是否在移动设备上，行[mode]="(isHandset | async)!.matches ? 'over' : 'side'"将字符串值作为模块的@Input-configuration传递。

这些应该是代码中所有困难的部分。如果你有更多的问题，请随便问。