Angular中点击Mat-Expansion-Panel标题修改背景色的实现

1. 调整CSS样式，限制高亮仅作用于标题栏 #

当前整个Accordion背景变色是因为样式覆盖了mat-expansion-panel整体，我们需要把高亮样式只绑定到标题组件mat-expansion-panel-header，同时重置面板主体的背景色：

/* 复用你现有Email Templates的高亮样式，或者自定义匹配的颜色 */
.highlight-active {
  background-color: rgba(0, 0, 0, 0.04) !important;
}

/* 移除面板展开时的默认背景色，避免整体变色 */
mat-expansion-panel.mat-expanded {
  background-color: transparent !important;
}

/* 确保标题点击/激活状态下的高亮生效 */
mat-expansion-panel-header.highlight-active,
mat-expansion-panel-header:active {
  background-color: rgba(0, 0, 0, 0.04) !important;
}

2. 两种方式控制高亮状态（选其一即可） #

方式一：路由联动自动处理（推荐）

如果你的Notification Management对应独立路由，直接用routerLink和routerLinkActive绑定标题栏，路由匹配时自动高亮，导航离开时自动移除样式，完全不用手动写逻辑：

<mat-expansion-panel>
  <mat-expansion-panel-header 
    routerLink="/notification-management"
    routerLinkActive="highlight-active">
    <mat-panel-title>
      Notification Management
    </mat-panel-title>
  </mat-expansion-panel-header>
  <!-- 面板内容区域 -->
  <div>
    <!-- 你的面板内容 -->
  </div>
</mat-expansion-panel>

<!-- 已有的Email Templates项示例 -->
<mat-list-item routerLink="/email-templates" routerLinkActive="highlight-active">
  Email Templates
</mat-list-item>

方式二：手动控制状态（适用于无对应路由的场景）

如果不需要路由跳转，只是点击标题切换高亮，同时监听路由变化在导航离开时重置状态：

组件TS代码：

import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';

@Component({
  selector: 'app-sidebar', // 替换成你的组件选择器
  templateUrl: './sidebar.component.html',
  styleUrls: ['./sidebar.component.scss']
})
export class SidebarComponent implements OnInit {
  isNotificationPanelActive = false;

  constructor(private router: Router) {}

  ngOnInit(): void {
    // 监听路由结束事件，导航离开时重置高亮状态
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe(() => {
      this.isNotificationPanelActive = false;
    });
  }

  // 点击标题时切换高亮状态
  togglePanelHighlight() {
    this.isNotificationPanelActive = !this.isNotificationPanelActive;
  }
}

模板HTML代码：

<mat-expansion-panel>
  <mat-expansion-panel-header 
    [class.highlight-active]="isNotificationPanelActive"
    (click)="togglePanelHighlight()">
    <mat-panel-title>
      Notification Management
    </mat-panel-title>
  </mat-expansion-panel-header>
  <!-- 面板内容区域 -->
</mat-expansion-panel>

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