如何在Angular中切换超链接的Bootstrap active类

嘿，你遇到的这个问题其实Angular已经给我们准备好现成的解决方案啦——用routerLinkActive指令就能自动帮我们管理active类的切换，不用手动写点击事件去修改DOM类名。

具体操作步骤： #

• 移除手动添加的active类：你原来给第一个链接手动加了active类，这会导致它一直处于高亮状态，我们要把这个手动的类去掉，交给Angular来控制。
• 添加routerLinkActive指令：给每个<a>标签加上routerLinkActive="active"，这样当对应的路由被激活时，Angular会自动给这个元素加上active类。
• 可选但推荐：添加精确匹配配置：如果你的路由有子路由的话，建议加上[routerLinkActiveOptions]="{ exact: true }"，确保只有当路由完全匹配时才会激活类，避免父路由被子路由触发高亮。

修改后的代码示例： #

<a href="#" class="list-group-item list-group-item-action" routerLink='/route1' routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">First Link</a>
<a href="#" class="list-group-item list-group-item-action" routerLink='/route2' routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">Second Link</a>
<a href="#" class="list-group-item list-group-item-action" routerLink='/route3' routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">Third Link</a>

简单原理说明： #

routerLinkActive是Angular Router模块提供的指令，它会监听当前路由的变化，当当前URL和routerLink指定的路由匹配时，就会给元素添加上你指定的类名（这里就是active）；当路由不匹配时，会自动移除这个类。这样点击不同的链接切换路由时，对应的链接就会自动高亮，旧的高亮会被取消。

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