Angular Material侧边栏打开时如何禁用背景（添加遮罩）

问题根源 #

你的布局结构未遵循Angular Material Sidenav的标准嵌套规则，且内部mat-sidenav缺少关键配置，导致遮罩无法正常显示或被路由内容遮挡。

方案1：修正Sidenav配置（快速修复） #

1. 启用遮罩并设置正确显示模式 #

在app-sidenav组件的模板中，为mat-sidenav添加mode="over"和hasBackdrop="true"属性：

<mat-sidenav #sidenav mode="over" hasBackdrop="true" class="sidenav">
  <!-- 侧边栏内容 -->
</mat-sidenav>

• mode="over"：指定侧边栏覆盖在主内容上方，匹配Google风格的侧边栏行为
• hasBackdrop="true"：强制触发背景遮罩生成

2. 调整遮罩层级 #

若路由组件内容仍遮挡遮罩，在全局样式文件（如styles.scss）中提升遮罩的z-index：

.mat-sidenav-backdrop.mat-sidenav-shown {
  z-index: 100; /* 确保该值高于路由内容的z-index，同时低于Header组件的z-index */
}

确保Header组件层级最高：

app-header {
  position: relative;
  z-index: 1000;
}

方案2：使用标准容器结构（推荐） #

将router-outlet嵌套在mat-sidenav-content内，这是Angular Material Sidenav的官方推荐结构，能自动处理遮罩和层级关系：

<mat-sidenav-container class="main-sidenav">
  <app-sidenav></app-sidenav>
  <mat-sidenav-content>
    <router-outlet></router-outlet>
  </mat-sidenav-content>
</mat-sidenav-container>

此结构下，mat-sidenav-container会自动管理遮罩的显示、隐藏及层级，无需额外自定义样式。

验证侧边栏触发逻辑 #

确保跨组件调用侧边栏的逻辑正确，例如在app-sidenav组件中暴露控制方法：

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

@Component({
  selector: 'app-sidenav',
  templateUrl: './sidenav.component.html',
  styleUrls: ['./sidenav.component.scss']
})
export class AppSidenavComponent {
  @ViewChild('sidenav') sidenav: MatSidenav;

  openSidenav() {
    this.sidenav.open();
  }

  closeSidenav() {
    this.sidenav.close();
  }
}

在Header组件中注入AppSidenavComponent并调用openSidenav()即可触发侧边栏。

无需更换组件，通过上述配置或结构调整即可实现需求。

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