角材料2：mat-tab-nav-bar：根选项卡处于活动状态？

Question

我使用的是导航栏。 我的标签页创建正确。 当我单击一个选项卡时，路由有效，并且该选项卡可以正确激活。

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

• 最上面：加载时，“ home”标签变灰（我的问题）
• 在底部：单击选项卡后，标签“ home”为全白色（应在加载时显示）。
• 注意：这两种情况下的路由都是相同的“ / 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 */
}