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的HAMBURGER图标。）视图。 See image here: enter image description here 。但是，在移动设备（或任何其他小屏幕设备）视图中，“汉堡包菜单”可见并正常工作（切换功能：打开和隐藏SideNav）。 See image here: 。

如何使“汉堡包图标”出现在笔记本电脑或台式机等大屏幕上？我知道我应该为此编辑断点，但是如何？这是“ 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

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

简单：您的“切换sidenav”图标按钮具有ngIf条件，该条件指示根据isHandset$变量是否为真来显示按钮。 sidenav的示意图还为该isHandset$变量生成了组件代码，该变量使用Angular CDK的BreakpointObserver。

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

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

constructor(private breakpointObserver: BreakpointObserver) {}

上面的代码概括地说：

观察文档中对窗口尺寸的任何更改。（它通过添加事件侦听器并自动删除侦听器来使用媒体查询）
observe的{{1}}方法记录在API documentation上，如下所示：

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

返回给定查询的匹配流。（类型：BreakpointObserver
BreakpointState是一个包含2个属性的接口：
- Observable<BreakpointState>-为观察方法提供的每个查询的键布尔对，具有其当前匹配状态。
- breakpoints: { [key: string]: boolean; }-断点当前是否匹配。
因此，流通过map管道进行管道传输，该管道将结果映射到matches: boolean属性。
结果，根据媒体查询是否匹配，菜单图标按钮被隐藏。

预定义断点（包括matches）的完整列表在documentation中列出。

Breakpoints.Handset类也广泛记录在Layout section on the CDK docs下。

Answer 2

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

您需要注册mat-icon组件，因为您当前正在将其用于菜单的汉堡包图标。因此，您将需要导入MatIconModule，以声明该组件。 MatButtonModule也是如此。

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

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

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

Answer 3

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

    *ngIf="isHandset$ | async">

Angular Material App中缺少“汉堡包图标”

3 个答案: