Angular：没有硬重载，Paypal按钮不会出现两次

Question

我有一个页面，其中生成了paypal付款按钮：当我第一次尝试生成付款按钮时，显示按钮。

但是，如果我第二次尝试生成按钮（例如在应用程序上另一个订单）没有任何反应：按钮将不会显示，我需要重新加载页面以使其工作。

我是否必须“重新启动”，“重新加载”贝宝按钮或其他什么？

HTML：

[...]

<div id="payment">
  <h1>Paiement</h1>
  <div id="paypal-button"></div>
</div>

打字稿：

declare var paypal: any;

@IonicPage()
@Component({
    [...]
}) export class OrderPage {

    [...]

    myFonction(){
        [...]
        // If the customer does everything right 
        // we display the paypal button : 
        displayPaymentButton()
    }    

    displayPaymentButton() {

        paypal.Button.render({
          env: 'sandbox', // Or 'production'

          payment: (data, actions) => {
            return actions.request.post(Api.API_URL + '/payment/create-payment', {
              bookingId: response.id
            }).then(function (res) {
                return res.id;
              });
          },

          onAuthorize: (data, actions) => {
            return actions.request.post(Api.API_URL + '/payment/execute-payment', {
              paymentID: data.paymentID,
              payerID: data.payerID
            })).then((res) => {
                if(res.paymentState === "approved"){
                  // It Worked ! 
                  let toast = this.toastCtrl.create({
                    message: "Commande réalisée avec succès !",
                    duration: 3000,
                    position: 'top'
                  });
                  toast.present();
                  this.navCtrl.push(MainPage, {}, {animate:false});
                } else {
                   [...]  
                  // Process Error
                }
              });
          },

          onError : (err) => {
              [...]
              // Process Error
          }
        }, '#paypal-button');
    }
}

Answer 1

我注意到，即使支付结束时，paypal按钮仍然保留在javascript内存中，并生成另一个时间相同的按钮肯定会导致问题。

作为一项艰苦的重装工作，我在等待找到卷轴解决方案时找到了解决方法。

替换这个：

            if(res.paymentState === "approved"){
              // It Worked ! 
              let toast = this.toastCtrl.create({
                message: "Commande réalisée avec succès !",
                duration: 3000,
                position: 'top'
              });
              toast.present();
              this.navCtrl.push(MainPage, {}, {animate:false});
            } else {
               [...]  
              // Process Error
            }

这样 ：

            if(res.paymentState === "approved"){
              // It Worked ! 
              let toast = this.toastCtrl.create({
                message: "Commande réalisée avec succès !",
                duration: 3000,
                position: 'top'
              });
              toast.present();

              // ==> HARD RELOAD TO HOME PAGE <==
              this.app.getRootNavs()[0].setRoot(MainPage);

            } else {
               [...]  
              // Process Error
            }