Google Pay 按钮在条件下禁用

Question

我需要在 Angular 中禁用 google-pay-button。以下是stackblitz链接

Stackblitz

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

Google Pay Button Docs

Answer 1

我们可以使用指令扩展 Google Pay Button 组件的功能。在这种情况下，我们可以有一个 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 演示。