Angular 根据列表中的URL向列表项添加活动类

我有3个列表项，我想根据URL添加活动类。以下是我的列表项目：

  <ul class="nav nav-tabs my-4">
    <li class="nav-item">
      <a routerLink='/' class="nav-link" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">Home</a>
    </li>
    <li class="nav-item">
      <a routerLink='products' class="nav-link" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">Products</a>
    </li>
    <li class="nav-item">
      <a routerLink='users' class="nav-link" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">Users</a>
    </li>
  </ul>

家


产品


使用者

我想做的是，我想激活产品列表项，即使URL如下所示： http://localhost:4200/products/1 或者像这样：http://localhost:4200/products?page=2&order=newest

---

我能做什么？

您不需要为每个链接编写

[routerLinkActiveOptions]=“{exact:true}”

，因为它与您的链接完全匹配，如果路由不同，即使是参数，也不会添加活动类

---

我们通常为根（'/'）路由添加

[routerLinkActiveOptions]=“{exact:true}”

，因为它也是其他链接的常见路由。

您是否尝试过

[routerLinkActiveOptions]=“{exact:false}”

？我更改了产品的exact-false，它成功了。您能解释一下exact做什么吗？

exact:true

仅当整个路径与您实际上不想要的路线完全匹配时才匹配<代码>精确：false与之相反，即匹配部分路由。