下面是我在 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
标题。我们怎样才能实现这个目标..?
任何帮助将不胜感激。
您已经在使用
expanded
属性来设置 panelOpenState
。那么,如何在 ngClass 中使用 panelOpenState
呢?
类似的东西:
<mat-expansion-panel [(expanded)]="panelOpenState" [ngClass]="{'active-panel': panelOpenState}">
然后只需在 css 中设置 active-panel 类即可:
.active-panel {
background-color: /* your desired color */;
}