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>

当 routerlink 处于活动状态和未处于活动状态时应用不同的样式

1 个答案: