实现SWIFT与Bank图标互斥禁用样式（Angular代码修改）

问题描述 #

现有Angular页面包含SWIFT图标、mat-slide-toggle滑动开关和Bank图标，需求如下：

• 选中SWIFT开关时，Bank图标呈现禁用状态
• 选中Bank开关时，SWIFT图标呈现禁用状态
• 仅允许修改现有HTML与CSS代码

尝试直接给图标组件添加disabled属性时，出现**"disabled不存在于组件类型"**的报错，需要解决该问题并实现需求。

解决方案 #

由于无法修改组件类来添加disabled属性支持，我们可以通过Angular属性绑定动态添加禁用样式类，结合CSS实现视觉禁用+交互阻止的效果：

修改后的HTML代码 #

<!-- 假设滑动开关绑定的变量为isSwiftSelected、isBankSelected -->
<mat-slide-toggle [(ngModel)]="isSwiftSelected">SWIFT</mat-slide-toggle>
<!-- SWIFT图标：当Bank选中时添加禁用类 -->
<swift-icon [class.disabled]="isBankSelected"></swift-icon>

<mat-slide-toggle [(ngModel)]="isBankSelected">Bank</mat-slide-toggle>
<!-- Bank图标：当SWIFT选中时添加禁用类 -->
<bank-icon [class.disabled]="isSwiftSelected"></bank-icon>

对应的CSS代码 #

/* 禁用状态样式：视觉灰化+阻止交互 */
.disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}

关键说明 #

1. 利用Angular的[class.disabled]属性绑定，根据滑动开关的选中状态动态给目标图标添加/移除禁用类
2. 通过CSS的opacity实现视觉上的禁用灰化效果，pointer-events: none阻止图标接收点击事件，cursor: not-allowed给用户明确的不可交互提示
3. 全程无需修改组件类，完全通过HTML和CSS实现需求，避开了disabled属性不存在的报错问题

内容的提问来源于stack exchange，提问作者Krish