如何在侧导航栏的活动链接下划线？在角度app中使用材料设计

Question

<div class="mt-3">
  <mat-nav-list>

      <a mat-list-item class="ml-2" style="font-size:15px;" (click)='paycard.html'>
          SERVICE
        </a>
      <a mat-list-item class="ml-2" style="font-size:15px;" (click)='paycard.html'>
          BILLING
        </a>
      <a mat-list-item class="ml-2" style="font-size:15px;" (click)='paycard.html'>
          OIL TICKETS
        </a>
      <a mat-list-item class="ml-2" style="font-size:15px;" (click)='paycard.html'>
          MY TIME
        </a>
      <a mat-list-item class="ml-2" style="font-size:15px;" (click)='paycard.html'>
          APPROVE TIME
        </a>
      <a mat-list-item class="ml-2" style="font-size:15px;" (click)='paycard.html'>
          EMPLOYEE LIST
        </a>

我的html导航页面的片段，我只想在活动链接下划线，但不太确定如何在一个角度应用程序中使用材料设计。另外，如果有办法使它崩溃，我也想知道。谢谢。

Answer 1

如角路由和导航文档中所示，您可以使用routerLinkActive指令。

<mat-nav-list>
   <a mat-list-item 
        routerLink="/paycard"
        routerLinkActive="active_route"> Paycard </a>
</mat-nav-list>

这将将.active_route类添加到活动路由中。然后你可以按照你的意愿来设计它：

.active_route {
  text-decoration: underline;
}

如果您有类似的链接，您可能需要在路由器链接选项中使用{pathMatch: full} (例如，如果您有路由"/pay“和”/pay/card“)。

Answer 2

如果在标记中执行路由，则可以在路由处于活动状态时添加routerLinkActive属性以应用css类。

在你的例子中，应该是这样的：

    <a mat-list-item class="ml-2" style="font-size:15px;" (click)='paycard.html'
 routerLink="service" routerLinkActive="<css class you want to apply when active"> SERVICE </a>

有关更多信息，请看一看这里