Question

我使用ng generate @angular/material:material-nav --name header生成了标题组件，因此即使屏幕尺寸较大，我也需要固定汉堡包图标。现在，仅当屏幕尺寸较小时才显示。我需要一些帮助来解决此问题。 Stackblitz（https://angular-bfjx3s.stackblitz.io/）中的代码谢谢

需要这样的内容（https://console.cloud.google.com）

Answer 1

从下面的 header.component.html

中的代码中删除

'loggers': {
    'django.request': {
        'handlers': ['file'],
        'propagate': True,
        'level': 'WARN',
    },
    'django.db.backends': {
        'handlers': ['file'],
        'level': 'DEBUG',
        'propagate': True,
    }

条件

*ngIf

Answer 2

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

Answer 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

Answer 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)
    );

固定的汉堡包图标角度

4 个答案: