css - 设置 mat-list-item 颜色常量，直到单击下一个列表项

Question

我正在使用<mat-nav-list>其中 <mat-list-item> 的组件显示如下图所示:

当我点击特定的 <mat-list-item> 时(例如Home 1)，我想更改(Home 1)的文本颜色并且该文本颜色保持不变，直到我单击另一个 <mat-list-item> (例如Home 3)，像这样:

如何做到这一点？我缺少一些 css，这是 stackblitz链接。

Answer 1

对于可以这样使用的路线

<mat-nav-list>
  <mat-list-item [routerLink]="['/home1']" [routerLinkActive]="['active']">
    <mat-icon [class.active]="selected" matListIcon>home</mat-icon>
    <a matLine>Home 1</a>
  </mat-list-item>

  <mat-list-item [routerLink]="['/home2']" [routerLinkActive]="['active']">
    <mat-icon matListIcon>home</mat-icon>
    <a matLine>Home 2</a>
  </mat-list-item>

  <mat-list-item [routerLink]="['/home3']" [routerLinkActive]="['active']">
    <mat-icon matListIcon>home</mat-icon>
    <a matLine>Home 3</a>
  </mat-list-item>

  <mat-list-item [routerLink]="['/home4']" [routerLinkActive]="['active']">
    <mat-icon matListIcon>home</mat-icon>
    <a matLine>Home 4</a>
  </mat-list-item>

</mat-nav-list>

并在选择CSS中

.mat-list-item.active{
  color: red;
  //any styles you like to add
}

这是slackBlitz网址检查这个