2

I am new to Angular world and I want to make a Dashboard (with SideNav and TopNav) with Angular Material. So, I installed everything and added the Angular Material library via : 

ng add @angular/material

I added also the ready to use component for teh sideNav and TopNav and called it "mynav":

ng add @angular/material:nav mynav

when I run "ng serve -o" I got the sideNav and TopNav as wanted, but the HAMBURGER ICON to show and hide the sideNav is missing in the Desktop (or in any other widescreen device) view. See image here: enter image description here. In the mobile (or in any other small screen device) view though, the "Hamburger menu" is visible and working (toggling function: open and hide the SideNav). See image here: enter image description here.

How to get the "Hamburger Icon" appearing in the big screens like laptops or desktops? I know i should edit the breakpoints for that, but how? Here is the generated code in "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>
4

3 回答 3

1

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

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

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

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

constructor(private breakpointObserver: BreakpointObserver) {}

简而言之，上面的代码做了什么：

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

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

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

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

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

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

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

  5. 因此，菜单图标按钮会根据媒体查询是否匹配而隐藏。

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

该类也在CDK 文档BreakpointObserver的 Layout 部分下得到了广泛的记录。

于 2020-01-13T03:21:29.650 回答
0

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

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

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

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

@NgModule({
  imports: [
    MatButtonModule,
    MatIconModule,
    // other imported modules
  ],
  // others
于 2019-05-12T17:30:06.107 回答
0

我可以看到你很久以前就问过这个问题，但无论如何我都会发帖。我有一个非常相似的问题，而不是图标，而是显示“菜单”一词。我复制了您的代码以查看是否得到相同的结果，通过排除，我发现下面的代码行导致您的图标未显示

    *ngIf="isHandset$ | async">
于 2021-03-12T19:33:59.303 回答