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

【问题标题】：the function of the line under the current tab of "mat-group" in "mat-tab-nav-bar" (Angular)“mat-tab-nav-bar”中“mat-group”当前选项卡下的行的功能（Angular）
【发布时间】：2021-01-23 23:11:44
【问题描述】：

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

【问题讨论】：

标签： angular mat-tab

【解决方案1】：

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

border-bottom: blue;

编辑：

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

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

【讨论】：

【解决方案2】：

如何添加“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>

【讨论】：

【解决方案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>

【讨论】：

是的，现在“主页”选项卡下有蓝线，但如果我点击另一个选项卡（如注册），该行将停留在“主页”选项卡下.. 是不是有错误？做了吗？
@canko 尝试将 [routerLinkActiveOptions]="{exact:true}" 放入每个 mat-tab-link