时间戳

首页 > 解决方案 > Angular 5 Material mat-sidenav 切换不起作用

angular5 - Angular 5 Material mat-sidenav 切换不起作用

问题描述

我正在尝试使用官方打开/关闭示例让 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上使用[(opened)]="opened"。这只是让导航对我关闭，只需使用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)

我相信这可能与缺少 Material 模块有关，但据我所知，我拥有所有相关的模块。

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

如果有任何关于要修改哪些文件/部分的帮助非常明确，我将不胜感激，因为这种环境对我来说相对较新。谢谢！

标签： angular5toggleangular-material2mat-sidenav

解决方案

由上面的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>

推荐阅读