为何routerLinkActive会导致mat-table的mat-row点击后获焦？

嘿，我之前在做Angular mat-table结合路由实现行高亮的时候，也踩过一模一样的坑！给你梳理几个关键的解决步骤：

1. 先搞定点击时的蓝色:focus轮廓干扰 #

你看到的蓝色高亮其实是浏览器默认的焦点轮廓样式，不是routerLinkActive的效果。可以通过CSS来处理：

• 如果完全不需要焦点轮廓（不推荐，影响无障碍访问）：

.mat-row:focus {
  outline: none;
}

• 更友好的做法：只移除鼠标点击的焦点轮廓，保留键盘导航的焦点样式：

.mat-row:focus:not(:focus-visible) {
  outline: none;
}

2. 确保routerLinkActive正确绑定到路由匹配的行 #

你说高亮的是点击的行而非激活路由的行，大概率是routerLink和routerLinkActive的绑定逻辑错了。正确的姿势是：
给每一行mat-row绑定对应路由的routerLink，同时把routerLinkActive绑定到该行，指定自定义的激活类名。

示例代码：

<mat-row 
  *matRowDef="let row; columns: displayedColumns;"
  [routerLink]="['/your-detail-route', row.id]"
  routerLinkActive="active-row"
></mat-row>

然后定义你的高亮样式：

.active-row {
  background-color: #f5f5f5; /* 换成你想要的高亮颜色 */
}

3. 排查路由匹配规则（如果还是不生效） #

如果设置后激活类还是不生效，检查这两点：

• 确认路由配置的路径和routerLink的路径完全匹配（比如路由是/detail/:id，那routerLink就得是['/detail', row.id]）
• 如果有嵌套路由，可能需要开启exact匹配，避免父路由被误激活：

<mat-row 
  [routerLink]="['/your-detail-route', row.id]"
  routerLinkActive="active-row"
  [routerLinkActiveOptions]="{ exact: true }"
></mat-row>

最后别忘了，确保你的组件模块已经导入了RouterModule，不然routerLinkActive指令是不会生效的哦！

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