为什么其他默认路由器也将routerLinkActive css类应用于它们?角度

Question

我想用默认路由做路由器模块"如下所示：

const routes: Routes = [
{ path: '', component: HomeComponent},
{ path: 'messages', component: MessagesComponent },
{ path: 'profile', component: ProfileComponent },
]

我正在尝试将css类应用于以下元素：

<a routerLink="/" routerLinkActive="activeLink">
<span>Home</span>
</a>
<a class="messages" routerLink="/messages" routerLinkActive="activeLink">
<span>Messages</span>
</a>
<a class="profile" routerLink="/profile" routerLinkActive="activeLink">
<span>Profile</span>
</a>

但当我尝试使用routerLinkActive时，也可以使用其他页面，例如"/消息"；以及"/配置文件"；将css类带到并对其进行签名。为什么会发生在这里？我该怎么做才能使此代码正确？

Answer 1

很可能需要添加[routerLinkActiveOptions]="{exact: true}"

参考编号：https://angular.io/api/router/RouterLinkActive