Angular中mat-tab-link选中标签下划线异常：Home始终保持选中样式

问题根源 #

1. 手动绑定[active]属性与routerLinkActive的自动状态控制机制冲突，导致激活状态判断异常。
2. Home路由/采用默认的包含匹配规则，所有以/开头的路由都会触发它的routerLinkActive，因此Home标签始终显示激活状态。

解决步骤 #

1. 移除所有mat-tab-link上的[active]绑定，routerLinkActive会自动给匹配的链接添加active类，mat-tab-link会识别这个类来渲染激活样式（如下划线）。
2. 给Home的routerLinkActive添加exact匹配选项，确保仅当路由完全等于/时，Home才会被标记为激活。

修改后的代码 #

<div class="navtabs-container">
    <nav mat-tab-nav-bar fxFlex fxLayout="row" fxLayoutAlign="center center" >
      <a mat-tab-link 
         routerLink="/" 
         routerLinkActive="active" 
         [routerLinkActiveOptions]="{ exact: true }">
        Home
      </a>
      <a mat-tab-link 
         routerLink="/executive_dashboard" 
         routerLinkActive="active">
        Executive Dashboard
      </a>
      <a mat-tab-link 
         routerLink="/food-beverage" 
         routerLinkActive="active" 
         disabled>
       Admin Section
      </a>
      <a mat-tab-link 
         routerLink="/lifestyle" 
         routerLinkActive="active" 
         disabled>
       My Requests
      </a>
      <a mat-tab-link 
         routerLink="/helpview" 
         routerLinkActive="active">
       Help <mat-icon matListItemIcon>contact_support</mat-icon>
      </a>
    </nav>
  </div>

补充说明 #

• Angular Material的mat-tab-link组件会自动监听active类的变化，无需手动通过[active]绑定控制状态。
• exact: true选项强制路由完全匹配，彻底解决根路由/被所有子路由误匹配的问题。

内容的提问来源于stack exchange，提问作者Namo