Angular Material mat-sidenav代码无显示问题咨询

出现这个问题的核心原因是未正确配置Angular Material侧边栏相关的模块和依赖，具体分以下几点：

• 未导入MatSidenavModule：<mat-sidenav-container>和<mat-sidenav>都是Angular Material侧边栏模块提供的组件，若没有在你的Angular模块中导入该模块，Angular无法识别这些自定义元素，会导致组件渲染失败，甚至连带页面其他内容无法正常显示。
• 缺失动画依赖模块：Angular Material的多数组件依赖BrowserAnimationsModule，如果没有导入这个模块，部分组件会无法正常初始化，进而出现内容隐藏的情况。
• 容器高度未设置：mat-sidenav-container默认高度为0，若没有给.example-container设置合适的高度（比如占满视口），容器内的内容会因高度不足而被隐藏。

解决步骤 #

1. 导入必要模块
   在你的根模块（比如app.module.ts）中添加以下导入：

   import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
   import { MatSidenavModule } from '@angular/material/sidenav';
   

   并将它们加入imports数组：

   @NgModule({
     // ...其他配置
     imports: [
       BrowserModule,
       BrowserAnimationsModule, // 必须的动画模块
       MatSidenavModule // 侧边栏组件模块
     ]
   })
   

2. 设置容器高度
   在全局样式或组件样式中添加：

   .example-container {
     height: 100vh; /* 让容器占满整个视口高度 */
   }
   

完成以上配置后，重新运行项目，页面内容应该就能正常显示了。

内容的提问来源于stack exchange，提问作者mogale