Angular Material Schematics 生成的代码

Posted 2023-03-03

【中文标题】Angular Material Schematics 生成的代码

【英文标题】：Angular Material Schematics generated code

【发布时间】：2018-10-23 09:54:27

【问题描述】：

我是 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) 

【问题讨论】：

如果@Phil 的回答让您满意，您应该将他的回答标记为正确。谢谢。

【参考方案1】：

断点（观察者）根据本教程：https://alligator.io/angular/breakpoints-angular-cdk/

Angular CDK 有一个带有服务的布局包，可以轻松检测视口大小并与媒体查询匹配。这使您可以完全控制 UI 并适应不同的屏幕尺寸。

因此，例如，当分辨率不再被视为横向模式而是纵向模式时，断点就是转折点。或者在 isHandset 的情况下，当分辨率小到足以“正式”被视为手机/移动设备时。

isHandset: Observable<BreakpointState> 中的 Observable 表示 Angular CDK 框架注入 RXJS 流而不是静态值。因此，您需要订阅流才能获取最后一个值和所有后续更新。

isHandset | async 表示正在使用 Angular 的 async-Pipe。 Async-pipe 自动订阅流，返回值，触发更改检测并取消订阅流（取消订阅以避免内存泄漏很重要）。

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

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

evaluation ? ifTrue : ifFalse 是许多编程语言都知道的 if-else 运算符。而 [something] 是 Angular 将数据从父组件传递给子组件的方式。因此，[mode]="(isHandset | async)!.matches ? 'over' : 'side'" 行会传递一个字符串值作为模块的@Input-配置，具体取决于您是否在移动设备上。

这些应该是代码中的所有困难部分。如果您还有其他问题，请随时提问。

【讨论】：

请注意[attr.role]="isHandset ? 'dialog' : 'navigation'" :)

似乎该行可能生成不正确，因此是一个错误。

@IngoBürk 我不确定，但可以是this

抱歉，我的意思是它看起来像一个错误，因为 isHandset 是一个可观察对象，并且对于角色属性，它没有被订阅。

顺便说一句，我有点失望 Google 团队本身没有遵循它的代码指南并在 Observable-variables 末尾使用 $