Angular sidenav.toggle () не работает после повторного появления кнопки * ngIf

Question

Это точно такой же код с Angular веб-сайта материала , показывающего, как создавать различные sidenav для мобильных и настольных компьютеров.

<div class="example-container" [class.example-is-mobile]="mobileQuery.matches" *ngIf="shouldRun">
  <mat-toolbar color="primary" class="example-toolbar">
    <button mat-icon-button (click)="snav.toggle()"><mat-icon>menu</mat-icon></button>
    <h1 class="example-app-name">Responsive App</h1>
  </mat-toolbar>

  <mat-sidenav-container class="example-sidenav-container"
                         [style.marginTop.px]="mobileQuery.matches ? 56 : 0">
    <mat-sidenav #snav [mode]="mobileQuery.matches ? 'over' : 'side'"
                 [fixedInViewport]="mobileQuery.matches" fixedTopGap="56">
      <mat-nav-list>
        <a mat-list-item routerLink="." *ngFor="let nav of fillerNav">{{nav}}</a>
      </mat-nav-list>
    </mat-sidenav>

    <mat-sidenav-content>
      <p *ngFor="let content of fillerContent">{{content}}</p>
    </mat-sidenav-content>
  </mat-sidenav-container>
</div>

<div *ngIf="!shouldRun">Please open on Stackblitz to see result</div>

Я хочу, чтобы кнопка меню отображалась только когда это мобильно Я добавляю *ngIf="mobileQuery.matches" к нему.

Измените 3-ю строку на:

<button mat-icon-button *ngIf="mobileQuery.matches" (click)="snav.toggle()"><mat-icon>menu</mat-icon></button>

Странно, если вы измените размер окна, чтобы кнопка исчезла, измените размер, чтобы кнопка снова появилась кнопка больше не будет работать. sidenav не будет отображаться при нажатии на него. Только когда вы снова измените размер окна, меню внезапно появится.

Вы можете проверить его здесь

Answer 1

Это странно. Это на самом деле проблема с обнаружением изменений. Если вы вручную активируете обнаружение изменений после переключения боковой панели, все работает нормально. Рассмотрим следующее:

<!-- On click, call our toggle function which will toggle the side-nav and 
     trigger change detection -->
<button mat-icon-button *ngIf="mobileQuery.matches" (click)="toggle(snav)"><mat-icon>menu</mat-icon></button>

И наша toggle функция:

toggle(sidenav: any) {
  sidenav.toggle();
  this.changeDetectorRef.detectChanges();
}

Все работает как положено. Кроме того, если вы просто показываете / скрываете кнопку (не удаляете ее из DOM), все работает должным образом:

<!-- As long as you only show/hide the button, everything works as expected -->
<div [hidden]="!mobileQuery.matches">
  <button mat-icon-button  (click)="snav.toggle()"><mat-icon>menu</mat-icon></button>
</div>

У меня создан стек стека, который показывает эти примеры работающих . Это действительно странно, и я думаю, что вы, возможно, обнаружили ошибку в Angular материале. Дайте мне знать, если вы собираетесь отправить запрос об ошибке в репо; если нет, я буду.

Answer 2

Поскольку ваша главная цель - показать / скрыть кнопку меню, я думаю, что вам нужен только следующий код в конструкторе:

constructor(media: MediaMatcher) {
    this.mobileQuery = media.matchMedia('(max-width: 600px)');
}

Все работает нормально после применения этого изменения. Посмотрите на этот стек .

Дайте мне знать, если это поможет!

Answer 3

У меня была такая же проблема. После удаления changeDetectorRef.detectChanges () проблема исчезла.

Answer 4

Событие click работает нормально (вы можете добавить несколько журналов, чтобы проверить его), на самом деле это медиа-запрос к тегу mat-sidenav (строка 9), который нарушает snav.toggle ()