Angular 路由器LinkActiveOptions

Question

我有一些这样的链接

<li routerLinkActive="active" class="nav-item">
<a [routerLink]="['contracts']" 
[queryParams]="{ activeOnly: false }" 
class="nav-link">Contracts</a>
</li>

你在参数中看到我有？activeOnly=false，当我的网址像这样时，使用这种方法一切都可以

Contracts?activeOnly=false 在 html 中添加活动 css 类，用户可以看到它是活动链接

我遇到的问题是，有时 url 可以像这样的 contracts?activeOnly=true&id=1一样更改，然后active css 不再适用。

我需要的是在元素上有活动的 css 类，即使 url 已随查询参数更改。

示例如果 url 是这样的contracts?activeOnly=true&id=1

活动CSS 类也必须保留在LI html 标签上

Answer 1

Path: '/' Component: HomeComponent
Path: '/server' Component: ServerComponent
Path: '/about' Component: AboutComponent

家庭服务器 关于

现在如果您导航到服务器，将选择默认主页

家庭 服务器关于

HOME 和 SERVER 都将变为活动状态

为什么？

因为和localhost:4200/server之间有一条空路径，这将使主页选项卡也保持活动状态。localhost:4200server/

因此，为了处理它，您可以使用[routerLinkActiveOptions]="{exact : true}"tab home。现在，如果您导航到server，只有服务器选项卡会突出显示