在 routerlink 活动和不活动时应用不同的 styles

Question

我试图在 Angular 中有一个菜单，其中包含四个菜单项。 所有这些都应该用一条无间隙的线来强调。 活动的菜单项应该用另一种颜色加下划线。

困难在于，路线是动态设置的，因此我无法根据固定路线应用条件。

我的看法是这样的：

（这是一个在父组件中加载4次的组件，打包在一个ul中）

<div  routerLinkActive="border-b-4  border-primary font-semibold text-primary"
 class=" border-grey border-b-4 px-4  ">

  <a
    class="  px-2 pb-4 text-gray"
    routerLink="{{routeTo}}"
  >{{ tabName }}</a
  >

它会在网站加载时执行我想要的操作，但是一旦我单击其中一个菜单项，然后单击另一个，该项目的灰色下划线将被永久删除。 因此，当单击所有菜单项时，不再有灰色下划线。

我尝试将灰色边框底部设置为前一个组件中的 ul，但随后突出显示的底部只是堆叠在灰色边框上，因为它的高度不同。 另一个想法是使用 ngClass，但我无法让它工作。

Answer 1

找到了解决方案。 答案是

<li  #rla="routerLinkActive" routerLinkActive [ngClass]="{'border-primary':rla.isActive}" 
 class=" px-4  border-b-4">

  <a
    class=" text-gray"
    routerLink="{{routeTo}}"
  >{{ tabName }}</a
  >
</li>