如何在角度5中禁用或覆盖cdk-focused

Posted 2021-04-04

我正在研究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;
    }
  }

答案

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

可以在以下链接中找到此文档和API的文档： 1）FocusMonitor documentation＆ 2）FocusMonitor API

我遇到的问题：

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

现在，如果说，与我的第四个按钮相关联的routerLink是活动的，这会让人感到困惑，因为第四个按钮会有primary background color而第一个按钮有focused styling，因为按钮上的.cdk-focused应用了.cdk-program-focused和FocusMonitor类。

解决方案：

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'));
    }
}

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

另一答案

我使用侧导组件遇到了同样的问题。

在阅读了Aravind提供的解决方案之后，How to use EventEmitter(onClose) of the sidenav我决定调用以下方法：

onSideNavOpened() {
    let buttonsList = document.getElementsByClassName('mat-button');

    for(let currentButton of buttonsList) {
      currentButton.classList.remove("cdk-focused");
      currentButton.classList.remove("cdk-program-focused");
    }
  }

也许你可以在你的ngOnInit（）方法中或多或少地做同样的事情？

（为了记录，我的开放侧导航标签看起来像这样：<mat-sidenav #snav class="menu-sidenav" mode="over" position="end" opened="false" (open)="onSideNavOpened()">）

另一答案

向下滚动到粗体文本以获得答案。

好的做法是在更改元素的样式时不按元素引用，而是按类引用。例如，而不是使用：

mat-button-toggle-group {
    border: solid 1px #d1d8de;
}

你会写的

.mat-button-toggle-group {
    border: solid 1px #d1d8de;
}

再次，这只是一个好习惯。

另一件重要的事情（没有双关语意）是指出你应该避免使用!important。一般来说，这应保留用于特殊边缘情况（如打印）。这是因为它可能导致更难维护样式表。这有问题的一个很好的例子是想要改变这个的边界：

.mat-button-toggle-group {
    border: solid 1px #d1d8de !important;
}

因为覆盖!important的唯一方法是使用另一个!important。

您的答案的可能解决方案

有一个material-theme-overrides.scss文件，它基本上覆盖了类的样式。当您希望所有类在默认情况下以这种方式运行时，此方法是理想的。就像你想让你的所有.mat按钮都有一个半径一样。材料提供了一个很好的指导：https://material.angular.io/guide/theming

另一个选项使用::ng-deep，这允许您将样式强制转换为子组件。在这里阅读更多相关信息：

How and Where to use ::ng-deep?

另一答案

您是否尝试将!important添加到选择器的属性中：

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

这样你就会覆盖cdk-focused和cdk-program-focused类。

另一答案

懒人的CSS方法：

.your-elements-class-name:focus {
  outline: 0px solid transparent;
}