Angular Material 2 : mat-tab-nav-bar: Root tab active ?

Question

我使用标签导航栏。
我的标签创建正确。
当我单击一个选项卡时，路由会起作用，并且该选项卡会正确激活。

我的问题是当我第一次加载网站时，根选项卡按预期具有墨水，但标签未处于事件模式

顶部:加载时，标签“家”变灰(我的问题)

在底部:单击选项卡后，标签“主页”是全白色的(因为它应该在加载时)。

注意:“/home”

两种情况下的路由是相同的

成分:

export class NavbarComponent {
  // List of links
  links = [
    {label: 'Home', path:'/home'},
    {label: 'Design', path:'/design'}
  ];

  constructor() { }

模板:

<nav mat-tab-nav-bar
  class="mat-elevation-z4"
  backgroundColor="primary">
  <a *ngFor="let link of links"
    #rla="routerLinkActive"
    mat-tab-link
    routerLinkActive
    [routerLink]="link.path"
    [routerLinkActiveOptions]="{exact: true}"
    [active]="rla.isActive">
    {{link.label}}
  </a>
</nav>

Answer 1

经过进一步调查，这是一种有意的行为......
颜色区分项目的“休息”状态和“焦点”状态。

默认情况下，mat-tab-link 的不透明度为 0.6。 (灰色效果见上)

聚焦时，不透明度设置为 1(全白)。

所以在我的情况下，如果我想改变这种颜色，我可以覆盖 css。

.mat-tab-link {
  opacity: 1;
}

.mat-tab-link:focus {
  color: #800080; /* obvious color for demo */
}