“ mat-tab-nav-bar”角度中“ mat-group”的当前选项卡下的线的功能

问题描述

由于路由原因，我使用mat-tab-nav-bar而不是mat-group。但是在垫组中，当前选项卡下有一个“蓝色”线。在“ mat-tab-nav-bar”中是否有可能获得相同的功能？

解决方法

我该如何添加“ border-bottom：blue;”

我的代码看起来像这样

<nav mat-tab-nav-bar>

  <a mat-tab-link routerLink="">Home</a>
  <a mat-tab-link routerLink="Login">User Login</a>
  <a mat-tab-link routerLink="Registration">User Registration</a>

</nav>


<router-outlet></router-outlet>

,

您可以将元素的样式设置为：

border-bottom: blue;

编辑：

您可以分享自己拥有的东西。可能是这样的：

.mat-tab-group.mat-primary .mat-ink-bar,.mat-tab-nav-bar.mat-primary .mat-ink-bar {
    background-color: blue;
}

,

您缺少routerLinkActive，只需放置以下代码即可使用。

<nav mat-tab-nav-bar>

  <a mat-tab-link 
   routerLink=""
   routerLinkActive 
   #rla1="routerLinkActive" 
   [routerLinkActiveOptions]="{exact:true}"
   [active]="rla1.isActive">Home</a>
  <a mat-tab-link 
   routerLink="Login"
   routerLinkActive 
   [routerLinkActiveOptions]="{exact:true}"
   #rla2="routerLinkActive" 
   [active]="rla2.isActive">User Login</a>
  <a mat-tab-link 
   routerLink="Registration"
   routerLinkActive 
   [routerLinkActiveOptions]="{exact:true}"
   #rla3="routerLinkActive" 
   [active]="rla3.isActive">User Registration</a>

</nav>


<router-outlet></router-outlet>