Google 有条件禁用支付按钮

Question

我需要禁用 angular 中的 google 支付按钮。以下是 stackblitz link

我试过[禁用]，[attr.disabled]。但似乎没有任何效果。在某些情况下，我必须禁用此 google 支付按钮。非常感谢您的帮助。

Answer 1

我们可以使用指令扩展 Google 支付按钮组件的功能。在这种情况下，我们可以有一个 disabled 指令，它可以接受一个组件属性如果它需要被禁用。

创建 gpayDisabled 指令：

import { Directive, ElementRef, Input } from '@angular/core';
import { interval } from 'rxjs';

    @Directive({
      selector: '[gpayDisabled]',
    })
    export class GpayDisabledDirective {
      @Input() gpayDisabled = false;
      constructor(el: ElementRef) {
        const btnTimer = interval(200).subscribe(() => {
          let gPayButton = el.nativeElement.querySelector(
            '.gpay-card-info-container'
          );
          if (gPayButton) {
             gPayButton.disabled = this.gpayDisabled;
             if (this.gpayDisabled) {
              gPayButton.style.opacity = 0.5;
            }
            btnTimer.unsubscribe();
          }
        });
      }
    }

在模块的声明数组中声明，例如：

declarations: [AppComponent, GpayDisabledDirective]

然后在模板中，我们可以像这样使用这个指令：

 <google-pay-button
    [gpayDisabled]="isGpayDisabled"
    environment="TEST"
    [buttonColor]="buttonColor"
    [buttonType]="buttonType"
    [buttonSizeMode]="isCustomSize ? 'fill' : 'static'"
    [paymentRequest]="paymentRequest"
    [style.width.px]="buttonWidth"
    [style.height.px]="buttonHeight"
    (loadpaymentdata)="onLoadPaymentData($event)"
  ></google-pay-button>

其中 isGpayDisabled 是一个组件属性，为真或为假。

Stackblitz 演示。

Google 有条件禁用支付按钮

Google Pay Button Disable on Condition

typescript

angular

google-pay