Angular Material 应用程序中缺少“汉堡包图标”

Question

我是 Angular 世界的新手，我想用 Angular Material 制作一个仪表板（带有 SideNav 和 TopNav）。 因此，我安装了所有内容并通过以下方式添加了 Angular Material 库：

ng add @angular/material

我还为 sideNav 和 TopNav 添加了即用型组件，并将其称为“mynav”：

ng add @angular/material:nav mynav

当我运行“ ng serve -o ”时，我得到了想要的 sideNav 和 TopNav，但是桌面（或任何其他宽屏设备）视图中缺少显示和隐藏 sideNav 的汉堡图标。 看这里的图片： . 不过，在移动设备（或任何其他小屏幕设备）视图中，“汉堡菜单”是可见的并且有效（切换功能：打开和隐藏 SideNav）。 看这里的图片： .

如何让“汉堡图标”出现在笔记本电脑或台式机等大屏幕上？ 我知道我应该为此编辑断点，但是如何？ 这是“ mynav.component.html ”中生成的代码：

<mat-sidenav-container class="sidenav-container">
  <mat-sidenav #drawer class="sidenav" fixedInViewport="true"
      [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
      [mode]="(isHandset$ | async) ? 'over' : 'side'"
      [opened]="!(isHandset$ | async)">
    <mat-toolbar>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">
        <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
      </button>
      <span>project1</span>
    </mat-toolbar>
    <!-- Add Content Here -->
  </mat-sidenav-content>
</mat-sidenav-container>

Answer 1

重申我对您的问题的评论：

简单：您的“Toggle sidenav”图标按钮有一个ngIf条件，表示该按钮的显示基于isHandset$变量是否为真。 sidenav 的原理图还为使用 Angular CDK 的BreakpointObserver isHandset$变量生成组件代码。

查看nav原理图的原理图代码，可以看到isHandset$变量定义如下：

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

constructor(private breakpointObserver: BreakpointObserver) {}

简单来说，上面的代码做了什么：

1. 观察文档是否对窗口尺寸进行了任何更改。 （它通过添加事件侦听器并自动删除侦听器来使用引擎盖下的媒体查询）

2. BreakpointObserver的observe方法在API 文档中记录如下：

   获取给定查询的可观察结果，该结果将针对给定查询匹配的任何更改发出新结果。

   返回给定查询的匹配流。 （类型： Observable<BreakpointState>

3. BreakpointState是一个包含 2 个属性的接口：

   • breakpoints: { [key: string]: boolean; } breakpoints: { [key: string]: boolean; } -甲键布尔对，用于提供给观察方法，其当前状态相匹配的每个查询。
   • matches: boolean - 断点当前是否匹配。

4. 因此，流通过map管道传输， map管道将结果映射到matches属性。

5. 结果，根据媒体查询是否匹配来隐藏菜单图标按钮。

文档中列出了预定义断点（包括Breakpoints.Handset ）的完整列表。

BreakpointObserver类也在CDK 文档的Layout 部分下进行了大量记录。

Answer 2

您很可能没有为其导入所需的模块。

您需要注册mat-icon组件，因为您目前将它用于菜单的汉堡包图标。 因此，您需要导入声明组件的MatIconModule 。 MatButtonModule也是MatButtonModule 。

在使用导航菜单的模块上，进行以下更改：

import { MatButtonModule, MatIconModule } from '@angular/material';    

@NgModule({
  imports: [
    MatButtonModule,
    MatIconModule,
    // other imported modules
  ],
  // others

Answer 3

我可以看到你很久以前问过这个问题，但我还是要发帖。 我有一个非常相似的问题，而不是图标，字面上显示的是“菜单”这个词。 我复制了你的代码，看看我是否得到了相同的结果，通过消除，我认为下面的代码行导致你的图标没有显示

    *ngIf="isHandset$ | async">