Угловой материал: используя mat-sidenav, невозможно прочитать свойство 'toggle' из неопределенного - PullRequest
1 голос
/ 18 июня 2019

У меня есть проект Angular 8 с Angular Material 8, который не может переключать sidenav с помощью кнопки в том же компоненте. Консоль javascript сообщает, что

не может прочитать свойство 'toggle' из неопределенного

но sidenav имеет ссылочную переменную в шаблоне.

Я убедился, что кнопка находится в шаблоне, чтобы мне не приходилось беспокоиться об источниках событий или других хитростях. Это должно быть просто.

HTML

<mat-toolbar color="primary">
  <button mat-icon-button (click)="sidenav.toggle()" *ngIf="(isHandset$ | async)"><mat-icon>menu</mat-icon></button>
  <span>This Be Me App, Matey</span>
</mat-toolbar>
<mat-sidenav-container class="sidenav-container">
  <mat-sidenav #sidenav class="sidenav" fixedInViewport="true" *ngIf="isAuthenticated()"
      [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
      [mode]="(isHandset$ | async) ? 'over' : 'side'"
      [opened]="(isHandset$ | async) ? 'false' : 'true'">
    <mat-toolbar><mat-icon (click)="sidenav.toggle()" *ngIf="(isHandset$ | async)">arrow_back</mat-icon> Menu</mat-toolbar>
    <mat-nav-list>
      <a mat-list-item [routerLink]="['/home']" routerLinkActive="active">Home</a>
      <a mat-list-item (click)="logout()">Logout</a>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content class="content">    
    <!-- Add Content Here -->
    <router-outlet></router-outlet>
  </mat-sidenav-content>
</mat-sidenav-container>

Кнопка меню появляется и исчезает в точке останова, как и ожидалось, но нажатие на нее дает ошибку.

Что должно произойти, это то, что кнопка появляется только тогда, когда вы находитесь ниже перерыва isHandset$ (что происходит), а затем она должна открываться поверх содержимого (что не происходит). Поскольку ссылочная переменная #sidenav находится в теге mat-sidenav, похоже, что она настроена правильно.

1 Ответ

2 голосов
/ 18 июня 2019

ошибка, которой вы поделились, должна иметь зависимость или чего-то не хватает;чтобы увидеть рабочее поведение, нам пришлось обратиться к 2 *ngIf условиям в вашем коде:

  • isAuthenticated() - что может быть ложным, мы не знаем, какую логику вы использовали
  • (isHandset$ | async) - мы не знаем наблюдаемой логики

, предполагая, что эти условия 2 *ngIf выполняются, код работает нормально ... без ошибок 'не может'читать свойство 'toggle' из неопределенного '

релевантно ts :

import {Component} from '@angular/core';

@Component({
  selector: 'sidenav-open-close-example',
  templateUrl: 'sidenav-open-close-example.html',
  styleUrls: ['sidenav-open-close-example.css'],
})
export class SidenavOpenCloseExample {
  events: string[] = [];
  opened: boolean;
  isHandset$:boolean =true;
  isAuthenticated(){ return true;}

  shouldRun = [/(^|\.)plnkr\.co$/, /(^|\.)stackblitz\.io$/].some(h => h.test(window.location.host));
}

вы можете проверить рабочий стекблиц здесь

...