Angular 5嵌套mat-expansion-panel事件传播异常问题咨询

我之前踩过这个Angular Material扩展面板嵌套的坑，确实挺头疼的——默认情况下mat-expansion-panel-header会监听整个头部区域的点击事件，而且子面板的触发事件也会向上冒泡，导致父面板误触发关闭；输入框的回车或点击也会被面板的切换逻辑捕获。下面给你几个亲测有效的解决办法：

方案1：手动控制父面板的触发区域（最推荐） #

默认的面板切换逻辑是点击头部任意位置都触发，我们可以把触发范围缩小到单独的切换图标上，彻底隔离输入框和子面板的交互：

模板代码 #

<mat-expansion-panel [expanded]="isParentOpen">
  <mat-expansion-panel-header>
    <!-- 只有点击这个图标才会切换父面板状态 -->
    <button mat-icon-button (click)="toggleParentPanel($event)">
      <mat-icon>{{ isParentOpen ? 'expand_less' : 'expand_more' }}</mat-icon>
    </button>
    <!-- 输入框点击/回车都不会触发面板切换 -->
    <input matInput placeholder="父面板输入框" />
  </mat-expansion-panel-header>

  <!-- 嵌套的子面板，操作不会影响父面板 -->
  <mat-expansion-panel *ngFor="let item of childItems">
    <mat-expansion-panel-header>子面板 {{ item.name }}</mat-expansion-panel-header>
    <p>子面板内容区域</p>
  </mat-expansion-panel>
</mat-expansion-panel>

组件逻辑 #

import { Component } from '@angular/core';

@Component({
  selector: 'app-expansion-example',
  templateUrl: './expansion-example.component.html',
})
export class ExpansionExampleComponent {
  isParentOpen = false;
  childItems = [{ name: '1' }, { name: '2' }, { name: '3' }];

  toggleParentPanel(event: MouseEvent) {
    // 阻止事件冒泡到面板头部，避免触发默认切换逻辑
    event.stopPropagation();
    this.isParentOpen = !this.isParentOpen;
  }
}

方案2：增强事件阻止指令，覆盖多类事件 #

如果不想改动默认的触发逻辑，只需要阻止特定事件冒泡，可以升级你的指令，覆盖点击、回车、鼠标按下等可能触发面板切换的事件：

自定义指令代码 #

import { Directive, HostListener } from '@angular/core';

@Directive({
  selector: '[stopPanelEventBubble]'
})
export class StopPanelEventBubbleDirective {
  // 阻止点击事件冒泡
  @HostListener('click', ['$event'])
  onClick(event: MouseEvent) {
    event.stopPropagation();
  }

  // 阻止回车键盘事件冒泡（解决输入框回车触发面板切换的问题）
  @HostListener('keyup.enter', ['$event'])
  onEnter(event: KeyboardEvent) {
    event.stopPropagation();
    event.preventDefault(); // 可选：防止回车触发其他默认行为
  }

  // 阻止鼠标按下事件（子面板触发时可能会触发这个事件冒泡）
  @HostListener('mousedown', ['$event'])
  onMousedown(event: MouseEvent) {
    event.stopPropagation();
  }
}

模板中使用指令 #

<mat-expansion-panel>
  <!-- 父面板头部添加指令 -->
  <mat-expansion-panel-header stopPanelEventBubble>
    <!-- 输入框也添加指令 -->
    <input matInput placeholder="父面板输入框" stopPanelEventBubble />
  </mat-expansion-panel-header>

  <!-- 子面板整体添加指令，阻止事件传到父面板 -->
  <mat-expansion-panel *ngFor="let item of childItems" stopPanelEventBubble>
    <mat-expansion-panel-header stopPanelEventBubble>子面板 {{ item.name }}</mat-expansion-panel-header>
    <p>子面板内容区域</p>
  </mat-expansion-panel>
</mat-expansion-panel>

方案3：隐藏默认切换按钮，手动控制展开状态 #

利用hideToggle属性关闭面板的默认切换逻辑，完全自己控制展开/关闭状态：

<mat-expansion-panel [expanded]="isParentOpen" hideToggle>
  <mat-expansion-panel-header>
    <mat-icon (click)="isParentOpen = !isParentOpen">
      {{ isParentOpen ? 'expand_less' : 'expand_more' }}
    </mat-icon>
    <input matInput placeholder="父面板输入框" />
  </mat-expansion-panel-header>

  <mat-expansion-panel *ngFor="let item of childItems">
    <mat-expansion-panel-header>子面板 {{ item.name }}</mat-expansion-panel-header>
    <p>子面板内容区域</p>
  </mat-expansion-panel>
</mat-expansion-panel>

这个方案和方案1逻辑类似，好处是不用额外写toggleParentPanel方法，代码更简洁。

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