根据Angular中的URL将活动类添加到列表项答案

【问题标题】：Adding active class to list item according to the URL in Angular根据Angular中的URL将活动类添加到列表项
【发布时间】：2020-09-04 07:23:57
【问题描述】：

我有 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: false}"吗？
我将产品的确切错误更改为有效。你能解释一下究竟是做什么的吗？
exact: true 仅当整个路径与路线完全匹配时才匹配，而您实际上并不想要。 exact: false 与之相反，即匹配部分路由。

标签： angular typescript

【解决方案1】：

您不需要为每个链接写[routerLinkActiveOptions]="{exact: true}"，因为它完全匹配您的链接，并且如果路由不同，即使是参数也不会添加活动类。

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

【讨论】：