Angular Material实现点击侧边菜单外部关闭侧边导航栏的方案咨询

针对你的需求，完全可以不用jQuery或AngularJS，用Angular Material自带的功能或者Angular原生API就能实现，下面给你两种实用方案：

方案一：利用Angular Material原生的Backdrop功能（推荐） #

Angular Material的MatSidenav在mode="over"模式下，支持自动生成背景遮罩层（backdrop），点击遮罩层就能直接关闭侧边栏，这是最简洁的实现方式，完全符合Material的设计规范。

只需要修改你home.component.html里的<mat-sidenav>标签，添加两个关键属性：

<mat-sidenav #sidenav id="sidebar-panel" fixedInViewport="true" mode="over" hasBackdrop="true">
  <app-menu (closeSideNav)="sidenav.close()"></app-menu>
</mat-sidenav>

关键属性说明： #

• mode="over"：将侧边栏设置为悬浮在页面内容上方的模式（而非占据固定宽度的side模式）
• hasBackdrop="true"：启用侧边栏背后的半透明遮罩层

Material默认在mode="over"且hasBackdrop="true"时，点击遮罩层会自动关闭sidenav，所以不需要额外绑定事件，如果你想显式控制逻辑，也可以加上(backdropClick)="sidenav.close()"。

方案二：自定义全局点击监听（灵活场景适用） #

如果你的场景不需要遮罩层，或者需要更精细的点击判断逻辑（比如点击某些特定元素不关闭侧边栏），可以用Angular的HostListener监听全局点击事件，判断点击位置是否在侧边栏外部。

修改home.component.ts： #

首先导入必要的模块和类：

import { Component, EventEmitter, Output, ViewChild, HostListener } from '@angular/core';
import { Router } from '@angular/router';
import { MatSidenav } from '@angular/material/sidenav';

然后在组件类中获取侧边栏实例，并添加点击监听：

export class HomeComponent { 
  @Output() SideNavToggle = new EventEmitter();
  @ViewChild('sidenav') sidenav!: MatSidenav; // 获取MatSidenav组件实例

  constructor( private router: Router ) { }

  public goHome() { 
    this.router.navigateByUrl("/"); 
  } 

  public openSidenav() { 
    this.SideNavToggle.emit(); 
  }

  // 监听整个文档的点击事件
  @HostListener('document:click', ['$event'])
  handleOutsideClick(event: Event) {
    // 检查点击目标是否在侧边栏内部
    const isClickInside = this.sidenav._elementRef.nativeElement.contains(event.target);
    
    // 如果侧边栏是打开状态，且点击在外部，就关闭它
    if (this.sidenav.opened && !isClickInside) {
      this.sidenav.close();
    }
  }
}

这个方案的优势是可以自定义判断逻辑，比如你可以额外排除某些元素（比如点击header的menu图标时不关闭），只需要在判断条件里添加对应的排除规则即可。

为什么不推荐jQuery？ #

Angular本身提供了完整的DOM操作和事件监听API，用jQuery会增加不必要的依赖，而且容易和Angular的变更检测机制冲突，所以优先用Angular或Material原生的方式实现。

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