Css 在单击下一个列表项之前设置材质列表项颜色常量的步骤

我正在使用

组件，其中显示

，如下图所示：

在这里，当我单击特定的

（如Home 1）时，我想将

（Home 1）

的文本颜色更改为常量，直到我单击另一个

（如Home 3），如下所示：

---

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

对于可以这样使用的路由

<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>

---

这是url检查此

您是否将此用于路由？是，我将此用于路由。您希望此退出路由吗？我只希望它用于路由。您可以将其作为新问题发布吗？您询问的选择列表问题已发布新问题，请参见以下内容：

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