根據Angular中的URL將活動類添加到列表項

Question

我有 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 =最新

我能做什么？

Answer 1

您不需要為每個鏈接編寫[routerLinkActiveOptions]="{exact: true}" ，因為它與您的鏈接完全匹配，並且如果路由不同，即使是參數也不會添加活動類。

我們通常為 root('/') 路由添加[routerLinkActiveOptions]="{exact: true}" ，因為它也是其他鏈接的常用路由。