设置mat-list-item颜色常量，直到单击下一个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网址检查