如何正确在mat-nav-list中使用routerLinkActive实现激活状态？

不用直接操作mdc-list-item--activated类，Angular Material的mat-list-item本身提供了[activated]输入属性，专门用来控制激活状态，这是官方推荐的合法方式，比手动修改类更可靠。

实现步骤： #

1. 组件内定义链接数据与状态切换逻辑

// 组件.ts文件
links = [
  { label: '首页', isActive: true },
  { label: '列表', isActive: false },
  { label: '设置', isActive: false }
];

setActive(targetLink: typeof this.links[0]) {
  // 先把所有链接的激活状态置为false
  this.links.forEach(link => link.isActive = false);
  // 再将点击的链接设为激活状态
  targetLink.isActive = true;
}

2. 模板中绑定激活属性与点击事件

<!-- 组件.html文件 -->
<mat-nav-list>
  <a mat-list-item
     *ngFor="let link of links"
     [activated]="link.isActive"
     (click)="setActive(link)">
    {{ link.label }}
  </a>
</mat-nav-list>

为什么不推荐手动加类？ #

直接给元素添加mdc-list-item--activated类属于绕过组件的官方接口操作，一旦Angular Material的内部样式类名或状态管理逻辑更新，你的代码可能会失效。而使用[activated]输入属性是组件设计时就暴露的状态控制方式，能保证版本兼容性和代码可维护性。

内容的提问来源于stack exchange，提问作者Hao