Как выделить выделенный элемент mat-list-цветом цветом?

Question

Здесь у меня есть несколько элементов списка матов, когда я нажимаю на уведомление, панель инструментов или комментарии, я хочу выделить его красным цветом, насколько это возможно в угловых?

<mat-list>
   <mat-list-item style="cursor: pointer" routerLink="/base/dashboard">Dashboard</mat-list-item>
   <mat-list-item style="cursor: pointer" routerLink="/base/notification">Notification</mat-list-item>
   <mat-list-item style="cursor: pointer" routerLink="/base/comments">Comments</mat-list-item>
</mat-list>

Answer 1

Поскольку вы уже используете routerLink, вы должны воспользоваться routerLinkActive

html:

<mat-list>
   <mat-list-item style="cursor: pointer" routerLink="/base/dashboard" [routerLinkActive]="['is-active']>Dashboard</mat-list-item>
   <mat-list-item style="cursor: pointer" routerLink="/base/notification" [routerLinkActive]="['is-active']>Notification</mat-list-item>
   <mat-list-item style="cursor: pointer" routerLink="/base/comments" [routerLinkActive]="['is-active']>Comments</mat-list-item>
</mat-list>

css:

.is-active {
    background-color: red;
}

Answer 2

Когда элементы списка куда-то перемещаются, следует использовать <mat-nav-list> с элементами <a mat-list-item> в качестве элементов списка.Список навигации будет отображаться с использованием role="navigation", и ему может быть присвоено значение aria-label для предоставления контекста представленного набора параметров навигации.Дополнительный интерактивный контент, такой как кнопки, не должен добавляться внутри якорей.

<mat-nav-list>
    <a mat-list-item 
    *ngFor="let report of category.reports">
    <span>{{ report.reportName }}</span>
    </a>
</mat-nav-list>

Это можно использовать, если вы хотите специально настроить таргетинг и изменить цвет.Для эффекта парения вышеупомянутое должно работать отлично

.mat-list-item {
background-color: #fefefe; 
}

Answer 3

мне так кажется

clickedItem: 'dashboard' | 'notification' | 'comments';


onClick(item: 'dashboard' | 'notification' | 'comments') {
  this.clickedItem = item;
}

.red {
  background-color: red;
}

<mat-list>
   <mat-list-item [ngClass]="{red: clickedItem === 'dashboard'}"            (click)="onClick('dashboard')" style="cursor: pointer" routerLink="/base/dashboard">Dashboard</mat-list-item>
   <mat-list-item [ngClass]="{red: clickedItem === 'notification'}"  (click)="onClick('notification')" style="cursor: pointer" routerLink="/base/notification">Notification</mat-list-item>
   <mat-list-item  [ngClass]="{red: clickedItem === 'comments'}" (click)="onClick('comments')" style="cursor: pointer" routerLink="/base/comments">Comments</mat-list-item>
</mat-list>