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

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

0 голосов
/ 11 июня 2018

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

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

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

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

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

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

1 Ответ

0 голосов
/ 11 июня 2018

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

Решение перемещало переключатель в тот же файл, что и side-nav .

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