在 Angular 中单击 Mat-Expansion-Panel 标题时更改其背景颜色

Question

下面是我在 Angular 15 和 Angular Material 14 中使用的代码

<mat-nav-list role="list">
<a mat-list-item role="listitem" class="list-item-setting" id="emailTemplatesId" *ngIf="isSysAdmin"
    (click)="sideNavLink(true, $event)" matTooltip="Notification Templates" matTooltipPosition="right"
    [matTooltipDisabled]="!isCompressed" [routerLink]="['/email-notification-templates']" routerLinkActive="active"
    [routerLinkActiveOptions]="{exact:true}" class="admin-link">
    <mat-icon class="list-item-setting">email</mat-icon>
    <span class="nowrap add-padding">Email Templates</span>
  </a>
  <a >
  <mat-accordion *ngIf="isAdmin && !isCSR">
    <mat-expansion-panel hideToggle [(expanded)]="panelOpenState" class="mat-elevation-z0">
      <mat-expansion-panel-header>
        <mat-panel-title style="text-align: left;" (click)="clickNotificationMgmt($event)">
          <img src="../../../../assets/images/icon_bell.svg" alt="Notification Management">
          <span class="add-padding-to-mat-panel-header"><a class="list-item-setting add-padding"
              [routerLink]="['/notification-list']" routerLinkActive="active">Notification Management</a></span>
        </mat-panel-title>
      </mat-expansion-panel-header>
      <div>
        <mat-panel-description (click)="clickNotificationList($event)" [ngClass]="isNotificationListClicked ? 'bold' : ''"
          id="notificationListId" (click)="sideNavLink(true, $event)" class="mat-panel-description-setting"><a
            class="list-item-setting add-padding" [routerLink]="['/notification-list']"
            routerLinkActive="active">Notification List
          </a></mat-panel-description>
          </div>
    </mat-expansion-panel>
  </mat-accordion>
  </a>
</mat-nav-list>

以下是

Email Templates

的截图

这里

Notification Management

是一个垫子扩展面板 - 手风琴控件。

如何以与

Email Templates

相同的方式显示

Notification Managment

，我的意思是单击它时具有相同的背景颜色，如果用户导航离开它，那么它应该返回正常状态而不突出显示。

编辑

现在整个 Accordion 控件正在更改背景颜色。我只需要它来获取

Notification Management

标题。我们怎样才能实现这个目标..？

任何帮助将不胜感激。

Answer 1

您已经在使用

expanded

属性来设置

panelOpenState

。那么，如何在 ngClass 中使用

panelOpenState

呢？ 类似的东西：

<mat-expansion-panel [(expanded)]="panelOpenState" [ngClass]="{'active-panel': panelOpenState}">

然后只需在 css 中设置 active-panel 类即可：

.active-panel {
  background-color: /* your desired color */;
}