Angular Material如何禁用svg图标

Question

类似于经典的引导程序禁用状态-

<button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>

我想使用disabled CSS在Angular Materials svg图标上模拟cursor: not-allowed状态。但是我想禁用点击事件。

.toolbar-icon-disabled {
    fill: gray;
    cursor: not-allowed;
    pointer-events: none;
  }

  <mat-icon svgIcon="historical-compare" [class.toolbar-icon-disabled]="true"></mat-icon>

这里的问题是我不能同时使用not-allowed和pointer-events: none，因为它们似乎是互斥的。

ex /在这里您可以看到我最左边的图标显示为禁用状态，因为fill颜色为灰色；但是，如果我添加cursor: not-allowed，它仍然可以点击。

我无法从屏幕上复制/粘贴不允许的圆圈，但这是一个示例：

Answer 1

建议的解决方法： 1）将mat-icon放在另一个锚标记中，并添加不允许的锚。 HTML：

<a [class.linkDisabled]="true"><mat-icon svgIcon="historical-compare" [class.toolbar-icon-disabled]="true"></mat-icon></a>

CSS：

.toolbar-icon-disabled {pointer-events: none;}
.linkDisabled {cursor: not-allowed;}

2）保留“光标：不允许；”在CSS中，我假设图标上将有一个事件监听器来执行某些操作。进入该方法，检查禁用条件，然后返回true。例如：

html：

<mat-icon svgIcon="historical-compare" [class.toolbar-icon-disabled]="flgDisabled" (click)="onClick()"></mat-icon>

方法：

  onClick() {
    if(this.flgDisabled) {
      return
    }
    console.log('called');
  }