ScriptJs：动态加载脚本后如何访问变量？

Question

我正在使用 script.js 动态加载 Paypal 客户端按钮作为 Angular7 PaypalPaymentController 的一部分。我的组件代码如下所示：

import {Configuration, Procedure} from '../models';
import {get } from 'scriptjs';

@Component({
   ...
})
export class PaymentComponent implements OnInit {
  @Input() configuration: Configuration;
  @Input() procedure: Procedure;

  constructor() {
  }

  ngOnInit() {
    get(`https://www.paypal.com/sdk/js?client-id=${this.configuration.paypalClientId}&currency=${this.configuration.currency}`, () => {
      paypal.Buttons({  // <<<<<<<<<<<<<<<<<<<<<<<<<<<<< compiler error here
        // set up the transaction
        createOrder: this.createOrder,
        // finalize the transaction
        onApprove: this.onApprove
      }).render('#paypal-button-container');
    });
  }

  ...
}

执行 scriptjs 的 get 后，如何访问动态加载脚本中定义的 paypal 变量？否则我会收到 TS 编译器错误...

ERROR in src/app/payment/payment.component.ts(24,7): error TS2304: Cannot find name 'paypal'.

更新： 完整的 Paypal 客户端示例如下（从那里复制粘贴）：

<!DOCTYPE html>

<head>
    <!-- Add meta tags for mobile and IE -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
</head>

<body>
    <!-- Set up a container element for the button -->
    <div id="paypal-button-container"></div>

    <!-- Include the PayPal JavaScript SDK -->
    <script src="https://www.paypal.com/sdk/js?client-id=sb&currency=USD"></script>

    <script>
        // Render the PayPal button into #paypal-button-container
        paypal.Buttons({

            // Set up the transaction
            createOrder: function(data, actions) {
                return actions.order.create({
                    purchase_units: [{
                        amount: {
                            value: '0.01'
                        }
                    }]
                });
            },

            // Finalize the transaction
            onApprove: function(data, actions) {
                return actions.order.capture().then(function(details) {
                    // Show a success message to the buyer
                    alert('Transaction completed by ' + details.payer.name.given_name + '!');
                });
            }


        }).render('#paypal-button-container');
    </script>
</body>

Answer 1

不知道您是如何设置环境的。我想你也必须导入 PayPal rest sdk as well. For typescript there are @types。

Answer 2

只需在导入后添加以下行：

declare let paypal: any;

ScriptJs：动态加载脚本后如何访问变量？

ScriptJs: How to access variable after dynamically loading script?

javascript

paypal

typescript

angular

angular7