Angular 5 Material Sidenav无需主内容的实现方案咨询

当然可以不用强制添加mat-sidenav-content！Angular Material的mat-sidenav-container并不要求必须包含内容区域，你只需要做一些简单的样式调整就能让侧边栏正常显示。

具体实现方案： #

1. 给mat-sidenav-container设置合适的高度，避免容器因无内容而折叠：

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

2. 直接在容器内仅放置mat-sidenav组件，填充你的侧边表单和链接即可：

<mat-sidenav-container>
  <mat-sidenav #sidenav mode="side" opened="true">
    <!-- 这里放置你的侧边导航内容 -->
    <div class="sidebar-menu">
      <h4>导航菜单</h4>
      <a routerLink="/home">首页</a>
      <a routerLink="/settings">设置</a>
      <!-- 这里可以添加你的表单元素，比如输入框、按钮等 -->
      <input type="text" placeholder="搜索..." />
      <button>提交</button>
    </div>
  </mat-sidenav>
</mat-sidenav-container>

3. 如果需要控制侧边栏的展开/收起状态，可通过模板引用变量实现：

import { Component, ViewChild } from '@angular/core';
import { MatSidenav } from '@angular/material/sidenav';

@Component({
  selector: 'app-sidebar-demo',
  templateUrl: './sidebar-demo.component.html',
  styleUrls: ['./sidebar-demo.component.css']
})
export class SidebarDemoComponent {
  @ViewChild('sidenav') sidenav!: MatSidenav;

  toggleSidebar() {
    this.sidenav.toggle();
  }
}

额外提示： #

• 若设置sidenav的mode为over或push，即使没有内容区域，侧边栏也能正常覆盖/推送页面，但仍建议给容器设置高度，避免布局异常。
• 如需侧边栏占满容器高度，可给mat-sidenav添加style="height: 100%"或通过CSS统一设置。

这样就能实现你想要的仅含侧边表单/链接的导航，完全不需要依赖mat-sidenav-content啦！

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