Angular Material 2侧边栏从外部组件触发时不显示遮罩问题

我来帮你排查这个遮罩层不显示的问题，大概率是因为你的Sidenav结构或者组件间状态传递没处理对——毕竟你把触发按钮和侧边栏拆在了不同组件里，下面一步步给你解决：

1. 先确认Sidenav的基础配置是否正确 #

遮罩层只在特定模式下才会显示，先检查这两个关键属性：

• mode属性：确保你的<mat-sidenav>设置为mode="over"或mode="push"，mode="side"是侧边固定显示的模式，不会生成遮罩层。
• hasBackdrop属性：不要手动设置hasBackdrop="false"，默认值是true，如果误设为false会直接隐藏遮罩。

2. 调整组件结构，确保Sidenav属于正确的容器 #

Angular Material的<mat-sidenav>必须直接作为<mat-sidenav-container>的子元素，否则遮罩层的渲染范围会出问题。结合你的组件拆分情况，推荐这样的结构：

根组件（app.component.html） #

把<mat-sidenav-container>放在根组件，同时包含触发按钮、主内容区和移动端侧边栏组件：

<mat-sidenav-container class="sidenav-container">
  <!-- 顶部导航栏（含汉堡按钮） -->
  <mat-toolbar color="primary">
    <button mat-icon-button (click)="toggleMobileSidenav()">
      <mat-icon>menu</mat-icon>
    </button>
    <span>我的应用</span>
  </mat-toolbar>

  <!-- 主内容区域 -->
  <mat-sidenav-content>
    <router-outlet></router-outlet>
  </mat-sidenav-content>

  <!-- 引入移动端侧边栏组件 -->
  <app-nav-mobile #mobileSidenav></app-nav-mobile>
</mat-sidenav-container>

给容器添加全屏样式，避免遮罩层显示不全：

/* app.component.css */
.sidenav-container {
  height: 100vh;
  width: 100%;
}

移动端侧边栏组件（nav-mobile.component.html） #

直接把<mat-sidenav>作为组件的核心内容，配置好属性：

<mat-sidenav #sidenav 
             mode="over" 
             hasBackdrop="true"
             fixedInViewport="true"
             [fixedTopGap]="56"> <!-- 适配顶部工具栏高度 -->
  <!-- 侧边栏菜单内容 -->
  <mat-nav-list>
    <a mat-list-item routerLink="/home">首页</a>
    <a mat-list-item routerLink="/profile">个人中心</a>
    <a mat-list-item routerLink="/settings">设置</a>
  </mat-nav-list>
</mat-sidenav>

3. 实现组件间的状态控制 #

因为触发按钮在根组件，侧边栏在子组件，需要让根组件能调用子组件的Sidenav实例：

根组件（app.component.ts） #

通过ViewChild获取子组件实例，实现切换方法：

import { Component, ViewChild } from '@angular/core';
import { NavMobileComponent } from './shared/nav-mobile/nav-mobile.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  @ViewChild('mobileSidenav') mobileSidenav: NavMobileComponent;

  toggleMobileSidenav() {
    this.mobileSidenav.sidenav.toggle();
  }
}

移动端侧边栏组件（nav-mobile.component.ts） #

暴露Sidenav实例给父组件：

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

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

4. 可选：添加响应式适配 #

如果需要在大屏和小屏自动切换Sidenav模式，可以用Angular CDK的BreakpointObserver：

// nav-mobile.component.ts
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';

// ...
export class NavMobileComponent {
  @ViewChild('sidenav') sidenav: MatSidenav;

  constructor(private breakpointObserver: BreakpointObserver) {
    // 监听屏幕尺寸，小屏用over模式（带遮罩），大屏用side模式（固定显示）
    this.breakpointObserver.observe([Breakpoints.TabletPortrait, Breakpoints.Handset])
      .subscribe(result => {
        if (result.matches) {
          this.sidenav.mode = 'over';
          this.sidenav.close();
        } else {
          this.sidenav.mode = 'side';
          this.sidenav.open();
        }
      });
  }
}

现在测试一下，点击汉堡按钮应该能正常弹出侧边栏，同时背景会出现半透明遮罩，点击遮罩也能关闭侧边栏。

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