角度材质2：在焦点丢失时取消选择选定的选项卡

Question

我使用材质2来制作带角度导航的标签。路由部分工作正常但当我通过单击页面上的某个位置更改鼠标焦点时，不再选择活动选项卡。

HTML中的代码：

<nav mat-tab-nav-bar>
  <a mat-tab-link routerLink="abc">abc</a>
  <a mat-tab-link routerLink="def">def</a>
</nav>

可能是什么原因？

谢谢你。

Answer 1

使用routerLinkActive指令在基于当前URL的链接上应用类。

<nav mat-tab-nav-bar>
  <a mat-tab-link routerLink="abc" routerLinkActive="active-link">abc</a>
  <a mat-tab-link routerLink="def" routerLinkActive="active-link">def</a>
</nav>

CSS

.active-link{
  color: green;
}