angular - “mat-tab-nav-bar”中“mat-group”当前选项卡下的行的功能（Angular）

Question

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

Answer 1

我该如何添加“边框底部：蓝色；”

我的代码看起来像这样

<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>

Answer 2

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

border-bottom: blue;

编辑：

你可以分享你所拥有的。它可以是这样的：

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

Answer 3

您缺少 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>