带有 url 动态 id 的 ngClass 条件

【问题标题】：ngClass condition with url dynamic id带有 url 动态 id 的 ngClass 条件
【发布时间】：2021-02-28 14:40:51
【问题描述】：

我需要一个 ngClass 条件，将一个活动类添加到列表元素。我需要同时使用 url '/companies' 和 '/company/:id'。

问题是“/company/:id”不起作用。如何使其适用于每个 id 而不是 ':id' 的条件？

<li class="nav-item" [ngClass]="{'active': menuActive === '/companies', 'active': menuActive === '/company/:id'}" *ngIf="isLoggedIn">

【问题讨论】：

【解决方案1】：

了解您正在创建一个对象很重要，因此您不能将相同的属性分配两次。如果你没有任何逻辑可以遵循，你可以做类似<li class="nav-item" [ngClass]="{active: menu === 'a' || menu === 'b' }"

因此，您可以更改 html 中的规则以转到组件以检查该类是否应该处于活动状态：

<li class="nav-item" [ngClass]="{active: isActive(menu) }" *ngIf="isLoggedIn">

在你的组件中：

isActive(menu: string) {
  const menuWithId = /^\/companies\/[a-z0-9]+$/i;
  return menu === "/companies" || menuWithId.test(menu);
}

【讨论】：