Исправлена ​​иконка гамбургера угловая

Question

Я сгенерировал компонент заголовка, используя ng generate @angular/material:material-nav --name header, в этом мне нужно исправить значок гамбургера, даже если размер экрана больше. Прямо сейчас это появляется только когда размер экрана маленький. Мне нужна помощь в исправлении этого. Код в стеке (https://angular -bfjx3s.stackblitz.io / ) Спасибо

Нужно что-то вроде этого (https://console.cloud.google.com)

Answer 1

Вы можете удалить условный оператор *ngIf="isHandset$ | async" с кнопки

Answer 2

Вам нужно изменить условие * 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 3

Удалите условие *ngIf из кода ниже в header.component.html

<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>

Answer 4

Спасибо всем за попытку, я обнаружил, что это разные точки останова, как упомянуто здесь ( Свойство angular mat-sidenav isHandset $ | async объяснение ) Поэтому я изменил текущие настройки на ((isWeb$ | async) || (isTablet$ | async) || (isHandSet$ | async)) в файле HTML и вФайл TS следующим образом

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