Angular5+Angular Material：锁定左侧侧边栏并切换右侧侧边栏

没问题！我帮你实现Angular 5 + Angular Material下的双侧边栏需求——左侧固定展开，右侧通过按钮控制切换。下面是完整的实现方案，和AngularJS版本的效果一致：

1. 组件模板（HTML） #

核心是通过mode和opened属性控制侧边栏行为，左侧固定展开，右侧绑定切换逻辑：

<mat-sidenav-container class="dashboard-mat-sidenav-container">
  <!-- 左侧固定展开的侧边栏 -->
  <mat-sidenav mode="side" opened="true" class="left-sidenav">
    <h3>左侧菜单</h3>
    <p>菜单项1</p>
    <p>菜单项2</p>
    <!-- 这里放置你的左侧侧边栏内容 -->
  </mat-sidenav>

  <!-- 主内容区域 -->
  <mat-sidenav-content>
    <!-- 控制右侧侧边栏的触发按钮 -->
    <button mat-raised-button color="primary" (click)="toggleRightSidenav()">
      切换右侧侧边栏
    </button>

    <div class="main-content">
      <h2>主页面内容</h2>
      <p>这里是应用的核心展示区域</p>
    </div>
  </mat-sidenav-content>

  <!-- 右侧可切换的侧边栏 -->
  <mat-sidenav #rightSidenav mode="over" class="right-sidenav">
    <h3>右侧面板</h3>
    <p>筛选条件</p>
    <p>设置选项</p>
    <!-- 可选：添加内置关闭按钮 -->
    <button mat-button (click)="rightSidenav.close()">关闭面板</button>
  </mat-sidenav>
</mat-sidenav-container>

2. 组件逻辑（TypeScript） #

通过ViewChild获取右侧侧边栏实例，封装切换方法：

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

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent {
  // 获取右侧侧边栏的DOM引用
  @ViewChild('rightSidenav') rightSidenav!: MatSidenav;

  // 切换右侧侧边栏的显示/隐藏
  toggleRightSidenav(): void {
    this.rightSidenav.toggle();
  }
}

3. 样式调整（CSS） #

确保容器和侧边栏占满视口，优化布局体验：

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

.left-sidenav {
  width: 260px; /* 自定义左侧侧边栏宽度 */
  background-color: #f0f0f0;
}

.right-sidenav {
  width: 220px; /* 自定义右侧侧边栏宽度 */
  background-color: #fafafa;
}

.main-content {
  padding: 24px;
  margin-top: 16px;
}

关键属性说明 #

• mode="side"：左侧侧边栏使用该模式，会与主内容区域并排显示，不会覆盖内容
• opened="true"：强制左侧侧边栏始终处于展开状态，无法通过拖拽或默认行为关闭
• mode="over"：右侧侧边栏使用该模式，会覆盖在主内容上方（如果需要并排显示，可改为mode="side"，并为主内容添加对应margin）
• @ViewChild('rightSidenav')：通过模板引用变量获取侧边栏实例，方便在逻辑层调用toggle()/open()/close()方法

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