Angular 6中如何将ngModel值传入组件配置PayPal支付

核心问题很明确：你在HTML里用[(ngModel)]="cart.totalPrice"绑定的是cart对象的属性，但PayPal配置代码里引用的是组件独立的this.totalPrice变量——这俩完全是两个互不关联的变量，自然拿不到正确的金额。下面给你几个可行的解决思路和优化方案：

方案1：直接使用cart对象的金额（最简洁） #

既然你已经通过async管道拿到了实时的cart对象，完全不需要额外的ngModel绑定，直接在组件里复用cart的totalPrice即可。同时要优化PayPal按钮的渲染逻辑，避免重复渲染：

修改后的shopping-cart-summary.html #

<div *ngIf="cart$ | async as cart">
  <!-- 若仅展示金额，直接用cart.totalPrice即可；如果需要用户修改金额再看方案2 -->
  <p>订单总金额: ${{ cart.totalPrice }}</p>
  <div id="paypal-checkout-btn"></div>
</div>

修改后的shopping-cart-summary.ts #

import { Component, OnInit, OnDestroy, AfterViewChecked } from '@angular/core';
import { Observable, Subscription } from 'rxjs';

// 假设你的购物车类型定义
interface Cart {
  totalPrice: number;
}

@Component({
  selector: 'app-shopping-cart-summary',
  templateUrl: './shopping-cart-summary.html',
})
export class ShoppingCartSummaryComponent implements OnInit, OnDestroy, AfterViewChecked {
  cart$: Observable<Cart>;
  cart: Cart;
  addScript = false;
  paypalLoad = false;
  private cartSubscription: Subscription;

  ngOnInit() {
    // 订阅购物车数据流，实时获取最新金额
    this.cartSubscription = this.cart$.subscribe(cart => {
      this.cart = cart;
      // 如果PayPal按钮已渲染，金额变化时重新渲染按钮
      if (this.addScript) {
        this.renderPayPalButton();
      }
    });
  }

  ngAfterViewChecked(): void {
    const elementExists = !!document.getElementById('paypal-checkout-btn');
    // 仅当按钮容器存在且未加载过PayPal脚本时，才执行加载和渲染
    if (elementExists && !this.addScript) {
      this.addPaypalScript().then(() => {
        this.renderPayPalButton();
        this.addScript = true;
        this.paypalLoad = false;
      });
    }
  }

  private renderPayPalButton() {
    // 先清空容器，避免重复渲染多个按钮
    const paypalBtnContainer = document.getElementById('paypal-checkout-btn');
    if (paypalBtnContainer) {
      paypalBtnContainer.innerHTML = '';
    }

    paypal.Button.render({
      client: {
        sandbox: 'My sandbox API',
      },
      payment: (data, actions) => {
        return actions.payment.create({
          payment: {
            transactions: [
              { 
                amount: { total: this.cart.totalPrice, currency: 'USD' }, 
                payee: { email: 'My Email ID' }
              }
            ]
          }
        });
      },
      commit: true,
      locale: 'en_US',
      style: {
        size: 'medium',
        color: 'blue',
        shape: 'pill'
      },
      env: 'sandbox',
      onAuthorize: (data, actions) => {
        return actions.payment.execute().then((payment) => {
          console.log('payment 1 completed!');
        });
      },
      onCancel: (data) => {
        console.log('payment 1 was cancelled!');
      }
    }, '#paypal-checkout-btn');
  }

  private addPaypalScript(): Promise<any> {
    return new Promise((resolve, reject) => {
      const scriptElement = document.createElement('script');
      scriptElement.src = 'https://www.paypalobjects.com/api/checkout.js';
      scriptElement.onload = resolve;
      scriptElement.onerror = reject;
      document.body.appendChild(scriptElement);
    });
  }

  ngOnDestroy() {
    // 取消订阅，避免内存泄漏
    if (this.cartSubscription) {
      this.cartSubscription.unsubscribe();
    }
  }
}

方案2：允许用户修改金额（双向绑定组件变量） #

如果需要保留输入框让用户手动调整金额，那需要把ngModel绑定到组件的totalPrice，并同步更新购物车数据：

修改后的shopping-cart-summary.html #

<div *ngIf="cart$ | async as cart">
  <input type="number" [(ngModel)]="totalPrice" (ngModelChange)="onAmountChange()">
  <div id="paypal-checkout-btn"></div>
</div>

修改后的shopping-cart-summary.ts（核心部分） #

totalPrice: number;
cart$: Observable<Cart>;
cart: Cart;
// ...其他变量和生命周期钩子

ngOnInit() {
  this.cartSubscription = this.cart$.subscribe(cart => {
    this.cart = cart;
    // 初始化组件金额为购物车的当前金额
    this.totalPrice = cart.totalPrice;
    if (this.addScript) {
      this.renderPayPalButton();
    }
  });
}

// 用户修改金额时的回调
onAmountChange() {
  // 这里根据你的业务逻辑更新购物车金额（比如调用服务）
  // this.cartService.updateTotalPrice(this.totalPrice);
  // 同时重新渲染PayPal按钮，使用最新金额
  if (this.addScript) {
    this.renderPayPalButton();
  }
}

private renderPayPalButton() {
  // ...和方案1一致的渲染逻辑，仅把金额替换为this.totalPrice
  paypal.Button.render({
    // ...其他配置
    payment: (data, actions) => {
      return actions.payment.create({
        payment: {
          transactions: [
            { 
              amount: { total: this.totalPrice, currency: 'USD' }, 
              payee: { email: 'My Email ID' }
            }
          ]
        }
      });
    },
    // ...其他回调
  }, '#paypal-checkout-btn');
}

关键优化点 #

• 避免重复渲染：用addScript变量控制PayPal脚本仅加载一次，金额变化时手动触发按钮重新渲染
• 实时同步数据：通过订阅购物车Observable，确保组件总能拿到最新的金额数据
• 内存泄漏防护：在组件销毁时取消购物车订阅

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