当路由作为 prop 传递时，如何在 Angular 中设置活动路由器链接的样式？

Question

我有一个组件，它是侧面导航栏中的一个项目：

<div
  class="flex gap-5 justify-left items-center text-center pl-5 group hover:cursor-pointer m-3 backdrop-blur-md"
  [routerLink]="route"
>
  <ng-icon
    class="text-3xl group-hover:text-cyan-600 transition-all duration-300"
    [name]="icon"
  ></ng-icon>
  <p
    class="text-xl font-bold group-hover:text-cyan-600 transition-all duration-300"
    routerLinkActive="active-link"
  >
    {{ title }}
  </p>
</div>

这就是我使用该卡的方式：

  <app-dashboard-nav-card
      [icon]="opt.icon"
      [title]="opt.title"
      [route]="opt.route"
    ></app-dashboard-nav-card>

我想设置活动链接的样式；路线作为 prop 被接收；

我试过：

<div
  class="flex gap-5 justify-left items-center text-center pl-5 group hover:cursor-pointer m-3 backdrop-blur-md"
  [routerLink]="route"
  routerLinkActive="active-link"
>
  <ng-icon
    class="text-3xl group-hover:text-cyan-600 transition-all duration-300"
    [name]="icon"
  ></ng-icon>
  <p
    class="text-xl font-bold group-hover:text-cyan-600 transition-all duration-300"
  >
    {{ title }}
  </p>
</div>

和

.active-link {
  color: red;
}

但是没有用。当路由作为 prop 传递时，如何设置活动路由器链接的样式？另外，我可以使用 tailwind css 设置路由器链接的样式吗？

我读到： 活动路由器链接 Angular

但这没有帮助。

Answer 1

您可以从任何地方传递路线。但是，如果您希望 Angular 匹配您当前的路线，则需要确保您传递的是绝对路径（以

/

开头）。

Tailwind 应与

routerLinkActive

一起工作