angular - 如何在 Angular 中禁用或覆盖 cdk-focused

Question

我正在研究 mat-button-toggle-group，我通过覆盖 mat-button-toggle-checked 类来修改现有的 css，如下所示。现在，当我在按钮之间切换时，css 无法正常工作，直到我得到焦点，这是因为当单击的按钮处于焦点时添加了 2 个 cdk 类“cdk-focused”和“cdk-program-focused”。有什么方法可以使这些类禁用或使它们不应用或用相同的 mat-button-toggle-checked CSS 覆盖它们？

<mat-button-toggle-group #group="matButtonToggleGroup" value="line">
    <mat-button-toggle (click)="showLine()" value="line">Line</mat-button-toggle>
    <mat-button-toggle (click)="showChart()" value="chart">Chart</mat-button-toggle>
</mat-button-toggle-group>

和CSS

mat-button-toggle-group {
    border: solid 1px #d1d8de;
    width:260px;
    height:41px;
    text-align: center;
    .mat-button-toggle-checked{
      background-color: #ffffff;
      font-weight: bold;
    }
    .mat-button-toggle{
      width:50%;
      font-size: 15px;
    }
  }

Answer 1

您可以使用 Angular CDK 的 FocusMonitor 服务 来禁用 .cdk-focused 和 .cdk-program-focused 类通过调用服务的 stopMonitoring() 方法。

这个和API的文档可以分别在以下链接中找到:
1) FocusMonitor documentation &
2) FocusMonitor API

The problem I had:

我的 sidenav 使用 *ngFor 创建了 4 个按钮。这些按钮中的每一个也是一个 routerLink。只有路由器链接处于事件状态的按钮才应具有主背景色。

现在，如果与我的第 4 个按钮关联的 routerLink 处于事件状态，这会变得令人困惑，因为第 4 个按钮将具有 primary background color 而第一个按钮具有 focused styling 因为按钮上的 FocusMonitor 应用了 .cdk-focused 和 .cdk-program-focused 类。

The solution:

import { Component, AfterViewInit } from '@angular/core';
import { FocusMonitor } from '@angular/cdk/a11y';

@Component({
    selector   : 'test-component',
    templateUrl: 'test-component.template.html',
})

export class TestComponent implements AfterViewInit {
    constructor(private _focusMonitor: FocusMonitor) {}

    ngAfterViewInit() {
        this._focusMonitor.stopMonitoring(document.getElementById('navButton_1'));
    }
}

您可以查看文档以根据您的需要进行定制。