Угловой 5 Материал мат-сиденав тумблер не работает

Question

Я пытаюсь заставить sidenav работать, используя официальный пример открытия / закрытия.

Я новичок в Angular, так что я не уверен, как все должно работать, но для других компонентов мне до сих пор было хорошо просто взять HTML-часть примеров и изменить CSS.

После некоторых проб и ошибок я понял, что mat-sidenav-content - это не содержимое sidenav, а содержимое страницы / сайта.

Чтобы поэкспериментировать и получить что-то работающее, я сейчас сделал это таким образом, в моем app.component.html (вероятно, позже перейду в директиву / компонент, как только я это выясню):

<mat-sidenav-container class="all-wrap" fullscreen>
  <mat-sidenav #sidenav mode="side" opened>
  yo
  </mat-sidenav>


<mat-sidenav-content>

<app-top-nav></app-top-nav>
<router-outlet></router-outlet>
     
<app-footer-nav></app-footer-nav>
    </mat-sidenav-content></mat-sidenav-container>

В примере используется [(открытое)]="открытое" на mat-sidenav. Это просто оставляет навигацию закрытой для меня, в то время как просто использование open оставляет ее открытой. В любом случае тумблер сломан. Переключение здесь, в topnav.html:

<div class="pageFullNav">
  <nav class="docs-navbar">
      
        <a mat-button (click)="sidenav.toggle()"><i class="material-icons">menu</i></a>   

... etc />

Консоль не работает при переключении.

TopNavComponent.html:5 ERROR TypeError: Cannot read property 'toggle' of undefined
    at Object.eval [as handleEvent] (TopNavComponent.html:5)
    at handleEvent (core.js:13589)
    at callWithDebugContext (core.js:15098)
    at Object.debugHandleEvent [as handleEvent] (core.js:14685)
    at dispatchEvent (core.js:10004)
    at eval (core.js:10629)
    at HTMLAnchorElement.eval (platform-browser.js:2628)
    at ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:4751)
    at ZoneDelegate.invokeTask (zone.js:420)

Я считаю, что это может быть связано с отсутствующими модулями материалов, но, насколько я могу судить, у меня есть все соответствующие.

import { NgModule } from '@angular/core';
import {MatButtonModule, MatCheckboxModule, MatInputModule, MatMenuModule, MatSidenavModule, MatButtonToggleModule, MatExpansionModule, MatRippleModule} from '@angular/material';

// add only required modules


@NgModule({
  imports: [MatButtonModule, MatCheckboxModule, MatInputModule, MatMenuModule, MatSidenavModule, MatButtonToggleModule, MatExpansionModule, MatRippleModule],
  exports: [MatButtonModule, MatCheckboxModule, MatInputModule, MatMenuModule, MatSidenavModule, MatButtonToggleModule, MatExpansionModule, MatRippleModule]
})
export class CustomMaterialModule { }

Я был бы признателен, если бы какая-либо помощь была в явном виде о том, какие файлы / разделы изменять, потому что эта среда является относительно новой для меня. Спасибо!

Answer 1

Решено p4r1 выше. Еще раз спасибо.

Решением было перемещение переключателя в тот же файл, что и боковая навигация.

<mat-sidenav-container class="all-wrap" fullscreen>
  <mat-sidenav #sidenav mode="side" opened>
  <h3>navigate</h3>
  </mat-sidenav>


<mat-sidenav-content>
    <a mat-button (click)="sidenav.toggle()"><i class="material-icons">menu</i></a>