html - 如何在侧边导航栏中为事件链接加下划线？在 Angular 应用程序中使用 Material 设计

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 导航页面的片段我只想在事件链接下划线，但不太确定如何在使用 Material 设计的 Angular 应用程序中做到这一点。另外，如果有一种方法可以折叠它，我也想知道。谢谢。

Answer 1

在 Angular 中找到 Routing and Navigation文档中，您使用 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”。)