固定汉堡图标角

Posted 2023-02-18

【中文标题】固定汉堡图标角

【英文标题】：Fixed hamburger icon angular

【发布时间】：2019-11-05 21:53:19

【问题描述】：

我使用ng generate @angular/material:material-nav --name header 生成了一个标题组件，在此我需要固定汉堡图标，即使屏幕尺寸较大。 现在它仅在屏幕尺寸较小时出现。 我需要一些帮助来解决这个问题。 stackblitz 中的代码 (https://angular-bfjx3s.stackblitz.io/) 谢谢

需要这样的东西 (https://console.cloud.google.com)

【参考方案1】：

从 header.component.html

中的以下代码中删除 *ngIf 条件

<button
  type="button"
  aria-label="Toggle sidenav"
  mat-icon-button
  (click)="drawer.toggle()">
  <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
</button>

【参考方案2】：

您可以从按钮中删除条件语句*ngIf="isHandset$ | async"

【参考方案3】：

您需要像这样更改汉堡包按钮的 *ngIf 条件（或者如果您希望按钮始终可见，您甚至可以删除 *ngIf：

<mat-toolbar color="primary">
      <button
        type="button"
        aria-label="Toggle sidenav"
        mat-icon-button
        (click)="drawer.toggle()"
        *ngIf="true">
        <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
      </button>
      <span>web-doctor</span>
  </mat-toolbar>

这里的代码：https://stackblitz.com/edit/angular-kutmnh

【讨论】：

谢谢你，工具栏现在向右移动，背景不工作。对于较小的屏幕尺寸，背景可以正常工作，这意味着我可以单击屏幕上的任何位置，汉堡图标会折叠。

【参考方案4】：

感谢大家的努力， 我发现这里提到的不同断点 (Angular mat-sidenav property isHandset$ | async explain) 所以我在 html 文件和 TS 文件中将当前设置更改为((isWeb$ | async) || (isTablet$ | async) || (isHandSet$ | async))，如下所示

 isWeb$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Web)
    .pipe(
      map(result => result.matches)
    );

    isTablet$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Tablet)
    .pipe(
      map(result => result.matches)
    );

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