Angular项目中如何按条件禁用google-pay-button组件

google-pay-button是Google封装的自定义Angular组件，没有映射原生按钮的disabled属性，因此你之前用[disabled]、[attr.disabled]的写法不生效。

官方推荐方案：使用组件自带的enabled输入属性 #

组件暴露了专用的@Input() enabled配置项，默认值为true，设置为false即可直接禁用按钮：

1. 组件模板绑定 #

<google-pay-button
  [paymentRequest]="paymentRequest"
  [enabled]="isGooglePayEnabled"
  (loadpaymentdata)="onLoadPaymentData($event)"
></google-pay-button>

2. 组件类逻辑控制 #

在ts文件中定义控制变量，满足特定条件时修改变量值即可实现动态禁用：

// 默认启用按钮
isGooglePayEnabled = true;

checkDisabledCondition() {
  // 匹配你的禁用逻辑，比如表单校验不通过、商品库存不足等
  if (/* 禁用触发条件 */) {
    this.isGooglePayEnabled = false;
  } else {
    this.isGooglePayEnabled = true;
  }
}

兜底备选方案（仅特殊场景使用，不推荐） #

如果有极端场景无法通过属性控制，也可以通过CSS屏蔽交互模拟禁用状态：

.gpay-disabled {
  pointer-events: none;
  opacity: 0.5;
}

模板中动态绑定类即可：

<google-pay-button
  [class.gpay-disabled]="!isGooglePayEnabled"
  ... 其余配置
></google-pay-button>

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