У меня есть проект 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
, похоже, что она настроена правильно.