时间戳

首页 > 解决方案 > 我们可以根据角度条件为图标设置禁用属性吗

angular - 我们可以根据角度条件为图标设置禁用属性吗

问题描述

我们可以根据角度条件为图标设置禁用属性吗？或者有什么方法可以实现吗？

例如： <i class="fa fa-remove" aria-hidden="true"></i></button>&nbsp;

标签： angular

解决方案

取决于您使用的库以及它是否支持开箱即用。

@angular/material，例如，开箱即用地支持它。

这是一个例子：

<mat-card-actions>
  <button 
    mat-icon-button 
    [disabled]="count === 0" 
    aria-label="Example icon-button with a heart icon"
    (click)="count = count - 1">
    <mat-icon>remove_circle_outline</mat-icon>
  </button>
  {{ count }}
  <button 
    mat-icon-button 
    [disabled]="count === 3" 
    aria-label="Example icon-button with a heart icon"
    (click)="count = count + 1">
    <mat-icon>add_circle_outline</mat-icon>
  </button>
</mat-card-actions>

这是您的参考的示例演示。

如果您不想使用类似的库怎么办@angular/material

如果您不使用类似 的库@angular/material，那么您始终可以ngClass根据元素有条件地使用和设置类。

你会像这样创建一个 CSS 类：

.disabled {
  cursor: none;
  opacity: .5;
  pointer-events: none;
}

然后有条件地将其应用于图标，如下所示：

<a 
  href="javascript:void(0)" 
  class="card-link minus"
  [ngClass]="{ 'disabled': count === 0 }"
  (click)="count = count - 1">
  <svg class="svg-circleplus" viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="45" fill="none" stroke-width="7.5"></circle>
    <line x1="32.5" y1="50" x2="67.5" y2="50" stroke-width="5"></line>
  </svg>
</a>
<span class="card-link">
  {{ count }}
</span>
<a 
  href="javascript:void(0)" 
  class="card-link plus"
  [ngClass]="{ 'disabled': count === 3 }"
  (click)="count = count + 1">
  <svg class="svg-circleplus" viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="45" fill="none" stroke-width="7.5"></circle>
    <line x1="32.5" y1="50" x2="67.5" y2="50" stroke-width="5"></line>
    <line x1="50" y1="32.5" x2="50" y2="67.5" stroke-width="5"></line>
  </svg>
</a>

这是您的参考的示例演示。

PS：您可能需要采取其他措施来确保专业用户不会通过导航到开发工具并手动更改 CSS 样式来覆盖它们。

推荐阅读